/* Netio Dijital — site stilleri */

:root {
  --ink: #19171c;
  --ink-2: #4a4850;
  --muted: #8a888f;
  --faint: #cfced3;
  --line: #e7e6ea;
  --gray: #f2f1f3;
  --gray-2: #e9e8ec;
  --blue: #01b2fd;
  --purple: #ff5a1f;
  --lavender: #ffb48c;
  --lavender-2: #ffd2ba;
  --lilac: #fff1ea;
  --orange: #FF5A1F;
  --wrap: 860px;
  --gutter: 20px;
  --r: 40px;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-slide: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Buton yayı: hızlı yükselir, %47 taşar, salınmadan oturur (Jitter ölçümüne göre) */
  --spring: linear(0 0%, 0.2127 1%, 0.4089 2%, 0.5884 3%, 0.7512 4%, 0.8975 5%, 1.0271 6%, 1.1402 7%, 1.2366 8%, 1.3163 9%, 1.3795 10%, 1.426 11%, 1.456 12%, 1.4693 13%, 1.47 13.3%, 1.3997 16%, 1.3144 20%, 1.2473 24%, 1.1946 28%, 1.153 32%, 1.1204 36%, 1.0947 40%, 1.0745 44%, 1.0586 48%, 1.0461 52%, 1.0363 56%, 1.0285 60%, 1.0224 64%, 1.0176 68%, 1.0139 72%, 1.0109 76%, 1.0086 80%, 1.0068 84%, 1.0053 88%, 1.0042 92%, 1.0033 96%, 1 100%);
  --nav-h: 138px;
  --nav-shadow: 0 62px 17px rgba(0, 0, 0, 0), 0 40px 16px rgba(0, 0, 0, 0.01), 0 22px 13px rgba(0, 0, 0, 0.02), 0 10px 10px rgba(0, 0, 0, 0.04), 0 2px 5px rgba(0, 0, 0, 0.04);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font: 400 18px/1.5 var(--body);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { background: #fff; padding-top: var(--nav-h); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; }
p { margin: 0; }
strong { font-weight: 600; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--mid { max-width: calc(684px + var(--gutter) * 2); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 8px; }
.empty { color: var(--muted); padding: 48px 0; text-align: center; }

/* Butonlar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 32px; border: 0; border-radius: 999px; font: 600 18px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; transition: scale 0.3s var(--spring), background-color 0.2s, opacity 0.2s; }
.btn:hover { scale: 1.05; transition: scale 0.6s var(--spring), background-color 0.2s, opacity 0.2s; }
.btn:active { scale: 0.97; transition-duration: 0.15s; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 56px; }
.btn--xl { height: 60px; padding: 0 26px; font-size: 20px; }
.btn--xxl { height: 76px; padding: 0 36px; font-size: 22px; }
.btn--block { width: 100%; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--lavender { background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%); color: #fff; }
/* Ana sayfa çağrısı: köşeleri yumuşak dikdörtgen, sağda küçük ok */
.hero__cta { border-radius: 14px; gap: 10px; color: #fff; background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%) 0 0 / 160% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 30px -14px rgba(226, 64, 12, 0.7); }
.hero .hero__cta.btn, .hero .hero__cta.btn:hover { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), scale 0.4s var(--spring), background-position 0.6s var(--ease), box-shadow 0.3s; transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
.hero__cta:hover { background-position: 100% 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 36px -14px rgba(226, 64, 12, 0.8); }
.cta-arrow { display: inline-block; font-size: 0.8em; transition: transform 0.4s var(--spring); }
.hero__cta:hover .cta-arrow { transform: translate(2px, -2px); }
.btn--orange { background: var(--orange); color: var(--ink); height: 52px; padding: 0 20px; font-size: 16px; }
.btn--gray { background: var(--gray); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.round { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--gray); color: var(--ink); transition: background-color 0.2s, opacity 0.2s; }
.round:hover { background: var(--gray-2); }
.round:disabled { opacity: 0.4; cursor: default; }

/* Etiketler */
.pill { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--gray); font: 600 20px/1 var(--display); letter-spacing: -0.02em; }
.pill--purple { background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%); color: #fff; }
.pill--orange { background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%); color: #fff; }
.pill--white { background: #fff; }
.tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 3px 5px; background: #fff; color: var(--ink); font: 600 20px/1 var(--display); letter-spacing: -0.01em; }
.tag--dark { background: var(--ink); color: #fff; }
.tag em { font-style: normal; background: var(--orange); padding: 3px 5px; margin: -3px 0 -3px -5px; }

/* Üst menü */
/* Sabit header: en üstte saydam; aşağı kaydırınca küçülür (is-min), yukarı kaydırınca beyaz şeritle tam menü gelir (is-bg) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav__inner { position: relative; pointer-events: auto; }
.nav__bar { position: absolute; top: 35px; left: 50%; width: calc(var(--wrap) + 80px); height: 100px; margin-left: calc(var(--wrap) / -2 - 40px); border-radius: 20px; background: #fff; box-shadow: none; transform: translateY(-140px); transition: transform 0.9s var(--ease-slide), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.nav.is-bg .nav__bar { transform: none; box-shadow: var(--nav-shadow); }
.nav__logo, .nav__menu, .nav__ghost { transition: opacity 0.3s, transform 0.45s var(--ease-slide), background-color 0.3s, padding 0.45s var(--ease-slide), box-shadow 0.3s; }
.nav.is-min .nav__logo, .nav.is-min .nav__menu { opacity: 0; transform: translateY(-8px); pointer-events: none; }
/* Küçülmüş durumda "Bize yazın" açık gri bir hap olur (Jitter) */
.nav.is-min .nav__ghost { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--gray); }
.nav__more { display: grid; place-items: center; width: 0; height: 52px; margin-left: -30px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; overflow: hidden; opacity: 0; pointer-events: none; transition: width 0.45s var(--ease-slide), margin 0.45s var(--ease-slide), opacity 0.25s, transform 0.25s var(--ease); }
.nav.is-min .nav__more { width: 52px; margin-left: 0; opacity: 1; pointer-events: auto; }
.nav__more:hover { transform: scale(1.06); }
.nav__inner { display: flex; align-items: center; gap: 44px; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 58px var(--gutter) 28px; }
.nav__logo { color: var(--ink); flex: none; }
.nav__logo .logo { height: 28px; width: auto; transform: translateY(-4px); }
.nav__links { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; }
.nav__link { display: block; font: 600 16px/24px var(--display); letter-spacing: -0.02em; transition: color 0.2s; }
.nav__links:hover .nav__link { color: #a8a6ad; }
.nav__links .nav__item:hover .nav__link, .nav__item.is-open .nav__link { color: var(--ink); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 30px; transition: gap 0.45s var(--ease-slide); }
/* Haplar arasında 15px (Jitter): küçülmüş durumda tüm öğeler hap olduğu için boşluk daralır */
.nav.is-min .nav__actions { gap: 15px; }
.nav__ghost { font: 600 16px/24px var(--display); letter-spacing: -0.022em; }
.nav__toggle { display: none; position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--gray); color: var(--ink); place-items: center; }
.nav__toggle > * { grid-area: 1 / 1; }
/* Açılınca koyu daire noktadan büyür, çizgiler X'e döner */
.nav__toggle-dot { width: 100%; height: 100%; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 0.5s var(--ease-slide); }
.nav__toggle svg { position: relative; transition: opacity 0.2s, transform 0.4s var(--ease-slide), color 0.2s; }
.nav__toggle .i-close { opacity: 0; transform: rotate(-45deg) scale(0.6); color: #fff; }
.nav.is-open .nav__toggle-dot { transform: scale(1); }
.nav.is-open .nav__toggle .i-menu { opacity: 0; transform: rotate(45deg) scale(0.6); }
.nav.is-open .nav__toggle .i-close { opacity: 1; transform: none; }
.mpanel { display: none; }

.mega { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: 526px 1fr; gap: 92px; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 22px var(--gutter) 40px; opacity: 0; visibility: hidden; transition: opacity 0.12s linear, visibility 0s linear 0.12s; }
/* panelin üst boşluğu ve yanları da üzerine gelme alanı sayılır; imleç kenara kaydığında panel kapanmaz */
.mega::before { content: ''; position: absolute; left: -100vw; right: -100vw; top: -28px; bottom: 0; z-index: -1; }
/* Klavye odağında açılır (:focus-visible); fare tıklamasının bıraktığı odak paneli açmaz */
.nav:not(.is-locked) .nav__item:hover .mega, .nav__item.is-open .mega, .nav__item:has(:focus-visible) .mega { opacity: 1; visibility: visible; transition: opacity 0s, visibility 0s; }
/* Alt menü zemini: menü çubuğu boyutunda (köşe 20px) başlar, ~0,45 sn'de tam genişliğe açılır;
   üst köşeler düzleşir, alt köşeler 40px yuvarlanır, altına geniş yumuşak gölge yayılır */
.nav__sheet { position: absolute; z-index: 0; top: 0; left: calc(50% - var(--wrap) / 2 - 40px); right: calc(50% - var(--wrap) / 2 - 40px); height: 100px; border-radius: 20px; background: #fff; opacity: 0; pointer-events: none; box-shadow: 0 0 0 rgba(25, 23, 28, 0);
  transition: left 0.45s var(--ease-expo), right 0.45s var(--ease-expo), height 0.45s var(--ease-expo), border-radius 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s linear; }
/* .is-locked: sayfa açıldığında fare menünün üzerindeyse, fare menü öğelerinden bir kez çıkana kadar üzerine gelme menüyü açmaz */
.nav:not(.is-locked):has(.nav__item:hover .mega) .nav__sheet,
.nav:has(.nav__item.is-open .mega, .nav__link:focus-visible ~ .mega, .mega :focus-visible) .nav__sheet { left: 0; right: 0; height: var(--sheet-h, 560px); border-radius: 0 0 40px 40px; opacity: 1; box-shadow: 0 60px 90px -40px rgba(25, 23, 28, 0.2), 0 2px 8px rgba(25, 23, 28, 0.04); }
/* Kartlar: %115'ten yay eğrisiyle oturur, sırayla (125 ms, sonra 75 ms arayla); kapanırken hızla söner */
.mega__card, .mega__work { opacity: 0; transform: scale(1.15); transition: opacity 0.1s linear, transform 0.2s ease, scale 0.3s var(--spring); }
.nav:not(.is-locked) .nav__item:hover .mega__card, .nav__item.is-open .mega__card, .nav__item:has(:focus-visible) .mega__card,
.nav:not(.is-locked) .nav__item:hover .mega__work, .nav__item.is-open .mega__work, .nav__item:has(:focus-visible) .mega__work { opacity: 1; transform: none; transition: opacity 0s linear var(--d, 0.125s), transform 0.6s var(--spring) var(--d, 0.125s), scale 0.3s var(--spring); }
.mega__cards > :nth-child(1) { --d: 0.125s; } .mega__cards > :nth-child(2) { --d: 0.2s; }
.mega__cards > :nth-child(3) { --d: 0.275s; } .mega__cards > :nth-child(4) { --d: 0.35s; }
/* Sağdaki liste kartlardan hemen sonra hafifçe yükselir */
.mega__list { opacity: 0; transform: translateY(10px); transition: opacity 0.1s linear, transform 0.2s ease; }
.nav:not(.is-locked) .nav__item:hover .mega__list, .nav__item.is-open .mega__list, .nav__item:has(:focus-visible) .mega__list { opacity: 1; transform: none; transition: opacity 0.35s ease 0.18s, transform 0.5s var(--ease-expo) 0.18s; }
.mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mega__card { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 184px; padding: 28px 30px; border-radius: 20px; background: var(--gray); }
.mega__card:hover { scale: 1.03; }
.mega__card strong { font: 800 21px/0.95 var(--display); letter-spacing: -0.02em; }
.mega__card span { font: 600 15px/1 var(--display); }
.mega__card--0 { background: var(--blue); color: #fff; }
.mega__card--2 { background: var(--purple); color: #fff; }
.mega__cards--works { grid-template-columns: 1fr 1fr; }
.mega__work { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.mega__work strong { color: var(--ink); font: 700 16px/1.2 var(--display); margin-top: 8px; }
.mega__thumb { display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--gray); }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega__list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mega__list .mega__title { font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: 12px; }
.mega__list a { padding: 5px 0; font-size: 16px; }
.mega__list a:hover { color: var(--purple); }
.mega__more { margin-top: 14px; padding: 0 22px !important; height: 52px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--gray); font: 600 18px/1 var(--display) !important; }

/* Bildirim */
.toast { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 14px; font-size: 16px; font-weight: 500; animation: toast 4.5s var(--ease) forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 16px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; visibility: hidden; } }

/* Hero */
.hero { padding: 55px 0 225px; text-align: center; }
.hero__inner { will-change: opacity, transform; }
.announce { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--gray); font-size: 15px; letter-spacing: -0.02em; }
.announce strong { font-weight: 600; }
.announce span { color: #e2400c; font-weight: 600; margin-left: 6px; }
.announce .announce__go { color: transparent; background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%); -webkit-background-clip: text; background-clip: text; }
.announce strong, .announce span { white-space: nowrap; }
@media (max-width: 600px) {
  .announce { flex-wrap: wrap; justify-content: center; height: auto; min-height: 28px; max-width: 100%; padding: 6px 16px; border-radius: 16px; row-gap: 1px; line-height: 1.3; text-align: center; }
}
.hero__title { margin-top: 33px; font-size: 80px; line-height: 72px; letter-spacing: -0.03em; font-weight: 800; }
.hero__line { display: block; }
/* Başlık animasyonu "Yükleniyor → yayında":
   1) iskelet: her kelimenin yerinde gri yükleme çubuğu uzar, üzerinden parlama geçer
   2) yayında: harfler kelime kelime alttan maskeli yükselir, iskelet erir
   3) etkileşim: harflerden sosyal medya tepkileri fırlayıp süzülür */
.js .hero__title[data-glyphs]:not(.is-ready) { visibility: hidden; animation: reveal-failsafe 0s 2.5s forwards; }
@keyframes reveal-failsafe { to { visibility: visible; } }
.hero__title[data-glyphs] { position: relative; }
.hword { position: relative; display: inline-block; }
.hword.is-masked { clip-path: inset(-0.32em -0.12em -0.28em -0.12em); }
.glyph { position: relative; display: inline-block; white-space: pre; }
/* line-height: 0 → hareketli harfler satır kutusunu etkilemez; başlığın boyu animasyon boyunca sabit kalır */
.glyph__ch { display: inline-block; line-height: 0; }
.hero__title.is-anim .glyph__ch { transition: transform 0.8s var(--ease-slide); }
.glyph.is-down .glyph__ch { transform: translateY(1.6em); }
.skel { position: absolute; left: 0.02em; right: 0.02em; top: 0.2em; bottom: 0.1em; border-radius: 0.14em; background: linear-gradient(100deg, #ecebef 0%, #ecebef 38%, #f9f8fb 50%, #ecebef 62%, #ecebef 100%); background-size: 260% 100%; transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; animation: skel-shimmer 1.15s linear infinite; transition: transform 0.55s var(--ease-slide), opacity 0.2s; }
.hword.skel-in .skel { transform: none; opacity: 1; }
.hword.is-reveal .skel { transform: scaleY(0.35); opacity: 0; transition: transform 0.45s var(--ease-slide), opacity 0.3s; }
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }

/* Sosyal medya tepkileri */
.react { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, -50%) scale(0); pointer-events: none; white-space: nowrap; animation: react-pop 1.5s var(--ease) forwards; animation-delay: var(--d, 0s); }
.react--icon { width: 48px; height: 48px; justify-content: center; border-radius: 50%; color: #fff; box-shadow: 0 10px 24px -8px rgba(25, 23, 28, 0.35); }
.react--icon svg { width: 22px; height: 22px; }
.react--heart { background: #ff3d7f; }
.react--comment { background: var(--blue); }
.react--share { background: var(--purple); }
.react--pill { height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--display); letter-spacing: -0.01em; box-shadow: 0 10px 24px -8px rgba(25, 23, 28, 0.4); }
.react--pill i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: var(--ink); font-style: normal; }
.react--pill svg { width: 15px; height: 15px; }
@keyframes react-pop {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 1; }
  14% { transform: translate(-50%, -70%) scale(1.12) rotate(4deg); opacity: 1; }
  24% { transform: translate(-50%, -78%) scale(1) rotate(0); opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translate(-50%, calc(-78% - 70px)) scale(0.9); opacity: 0; }
}

/* Başlık oturana kadar etiket, buton ve marka satırı bekler */
.hero .announce, .hero__cta, .trust { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), scale 0.3s var(--spring); }
.hero__cta:hover { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), scale 0.6s var(--spring); }
.js .hero.is-intro .announce, .js .hero.is-intro .hero__cta, .js .hero.is-intro .trust { opacity: 0; transform: translateY(12px); animation: intro-failsafe 0.4s 3s forwards; }
@keyframes intro-failsafe { to { opacity: 1; transform: none; } }
.hero__cta { transition-delay: 0.08s; }
.trust { transition-delay: 0.16s; }
.hero__cta { margin-top: 50px; padding: 0 50px; }
.trust { margin-top: 81px; }
.trust__line { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--ink); }
.trust__line::before, .trust__line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* Gruplar aynı hücrede üst üste durur; her biri kendi içinde önceden yerleşmiştir */
.trust__logos { display: grid; margin-top: 37px; }
.trust__ticker { display: none; }
.trust__group { grid-area: 1 / 1; display: flex; justify-content: space-between; align-items: center; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.trust__group.is-active { pointer-events: auto; }
.trust__slot { display: flex; height: 40px; align-items: center; }
/* Çıkış: soldan sağa sırayla küçülüp kaybolur */
.trust__mark { display: inline-flex; align-items: center; color: var(--ink); white-space: nowrap; transform-origin: 50% 50%; transform: scale(0.35); opacity: 0; transition: transform 0.32s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.22s linear 0.08s; transition-delay: calc(var(--i, 0) * 70ms); will-change: transform, opacity; }
/* Giriş: aynı yuvada, eskisi küçülürken büyüyerek gelir */
.trust__group.is-active .trust__mark { transform: none; opacity: 1; transition: transform 0.5s var(--ease), opacity 0.25s linear; transition-delay: calc(var(--i, 0) * 70ms + 220ms); }
.trust__group.is-instant .trust__mark { transition: none !important; }
/* Logolar tek renk (#19171C) ve beyaz detaylı hazırlanır; filtre uygulanmaz ki beyaz harfler kaybolmasın */
.trust__mark img { height: 28px; width: auto; max-width: 128px; object-fit: contain; }
.trust__mark img.is-sized { max-width: none; }

/* Logo dosyası olmayan referanslar için yazı-logolar */
.wm { display: inline-flex; align-items: center; gap: 7px; line-height: 1; }
.wm__icon { flex: none; width: 22px; height: 22px; }
.wm--1 .wm__icon, .wm--5 .wm__icon { width: 24px; height: 24px; }
.wm--2 .wm__icon { width: 18px; height: 18px; }
.wm--0 { font: 800 22px var(--display); letter-spacing: -0.06em; }
.wm--1 { font: 400 27px 'Instrument Serif', serif; font-style: italic; letter-spacing: -0.01em; }
.wm--2 { font: 400 13px 'Rubik Mono One', var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.wm--3 { font: 600 19px var(--body); letter-spacing: -0.03em; text-transform: lowercase; }
.wm--4 { font: 700 19px var(--display); letter-spacing: -0.03em; }
.wm--5 { font: 400 21px 'Bagel Fat One', var(--display); letter-spacing: -0.01em; }

/* Yatay iş vitrini */
.showroll { overflow: hidden; padding: 0 0 20px; }
.showroll__track { display: flex; gap: 20px; width: max-content; animation: roll 90s linear infinite; }
.showroll__track--slow { animation-duration: 110s; animation-direction: reverse; }
.showroll:hover .showroll__track, .showroll.is-paused .showroll__track { animation-play-state: paused; }
.showroll__item { width: 460px; flex: none; }
@keyframes ticker { to { transform: translateX(calc(-50% - 20px)); } }
@keyframes roll { to { transform: translateX(calc(-50% - 10px)); } }
.showroll__controls { display: flex; justify-content: flex-end; margin-top: 18px; }
.round .i-play, .is-paused .round .i-pause { display: none; }
.is-paused .round .i-play { display: block; }

/* İş kartı */
.card { display: block; position: relative; border-radius: var(--r); background: var(--gray); padding: 0 0 44px; overflow: hidden; }
.card__stage { position: relative; display: grid; place-items: center; height: 448px; }
.card__poster { width: 248px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c); box-shadow: 0 30px 40px -12px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.06); transition: transform 0.5s var(--ease); }
.card__poster > img, .card__poster > video { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card__poster { transform: scale(1.04) rotate(-1deg); }
.card__open { position: absolute; top: 24px; right: 24px; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; font: 600 14px/1 var(--display); opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.25s var(--ease); }
.card:hover .card__open { opacity: 1; transform: none; }
.card__meta { padding: 0 40px; }
.card__text { display: grid; gap: 6px; min-width: 0; }
.card__text strong { font: 700 22px/1.1 var(--display); letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__mark { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.32em; color: var(--orange); vertical-align: -0.06em; }
.card__client { padding-left: calc(22px * 1); }
.card__client { font-size: 14px; color: #6b6970; }
/* Kaydırdıkça dolan paragraf */
.manifest { padding: 160px 0 180px; }
.manifest__text { max-width: 600px; font: 800 40px/1.1 var(--display); letter-spacing: -0.03em; color: var(--faint); }
.manifest__text .w { transition: color 0.3s; }
.manifest__text .w.is-on { color: var(--ink); }
.no-fill .manifest__text { color: var(--ink); }

/* Showreel */
.reel { padding-bottom: 120px; }
.reel__frame { position: relative; display: grid; place-items: center; height: 537px; background: var(--gray); }
.reel__frame::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -90px; height: 90px; background: radial-gradient(50% 60% at 50% 0%, rgba(0, 0, 0, 0.07), transparent); }
.reel__screen { position: relative; width: 576px; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, #e2400c 0%, #ff7a3d 70%, #ffc29e 100%); box-shadow: 0 40px 60px -20px rgba(40, 20, 90, 0.35); }
.reel__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__screen:has(.reel__video) { background: #F6F5F8; }
.reel__comp { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.reel__brand { position: absolute; top: 20px; left: 26px; color: #fff; }
.reel__brand .logo { height: 16px; width: auto; }
.reel__comp strong { font: 800 64px/0.92 var(--display); letter-spacing: -0.04em; text-align: center; animation: reel-in 6s var(--ease) infinite; }
@keyframes reel-in { 0%, 8% { opacity: 0; transform: translateY(20px) scale(0.96); } 18%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.reel__path { position: absolute; left: 0; right: 0; bottom: 12%; width: 100%; height: 30%; }
.reel__play { position: absolute; left: 50%; bottom: 14%; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1.5px solid rgba(255, 255, 255, 0.7); color: #fff; animation: pulse 2.4s var(--ease-io) infinite; }
.reel__dot { position: absolute; bottom: calc(12% + 10%); right: 9%; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; }

/* Bölüm başlıkları */
.block { padding: 0 0 160px; }
.block--tight { padding-bottom: 120px; }
.block--flush-bottom { padding-bottom: 120px; }
.head { margin-bottom: 64px; }
.head h2 { font-size: 72px; line-height: 0.95; letter-spacing: -0.044em; }
.head .pill + h2 { margin-top: 20px; }
.head p { margin-top: 28px; font-size: 18px; line-height: 27px; }
.head .btn { margin-top: 36px; }
.head--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.head--center h2, .head--center p { max-width: 520px; }
.head--split { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.head--split .btn { margin: 0; }
.head--two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.head--two p { margin-top: 0; font-size: 16px; line-height: 24px; }
.h2-sm, .head .h2-sm { font-size: 48px; line-height: 1; letter-spacing: -0.038em; }

/* Süreç kartları: geniş kart, solda fotoğraf, sağda koyu panel. Kartlar 200px'de sabitlenir,
   her yeni kart öncekinin üstüne kayar; alttaki kart JS ile hafifçe küçülür (referans ölçüleri) */
.block--process { padding-bottom: 100px; }
.block--process .head { margin-bottom: 72px; }
.pstack { --pcard-h: min(calc(var(--wrap) / 2.05), calc(100vh - 240px)); position: relative; padding-bottom: 60px; }
.pstack__bar { position: sticky; top: 118px; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 26px; }
.pstack__bar h3 { font: 700 30px/1 var(--display); letter-spacing: -0.03em; }
.pstack__all { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 7px 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--display); letter-spacing: -0.01em; transition: scale 0.3s var(--spring); }
.pstack__all:hover { scale: 1.05; transition: scale 0.6s var(--spring); }
.pstack__all span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 15px; }
.pcard { position: sticky; top: 200px; height: var(--pcard-h); margin-bottom: 60px; }
.pcard:last-child { margin-bottom: 0; }
.pcard__inner { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: #111014; transform-origin: 50% 50%; will-change: transform; box-shadow: 0 -12px 40px -24px rgba(25, 23, 28, 0.35); }
/* görsel panelin soluna kadar uzanır; kişiler koyu panelin altında kalmaz */
.pcard__media { position: absolute; top: 0; left: 0; bottom: 0; right: calc(36% + 12px); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 36%; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: #111014; color: #fff; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard__tags span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font: 500 13px/1 var(--body); color: rgba(255, 255, 255, 0.85); }
.pcard__panel h3 { margin-top: 22px; font: 700 30px/1.05 var(--display); letter-spacing: -0.03em; }
.pcard__panel p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.pcard__metric { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pcard__metric strong { font: 800 64px/0.9 var(--display); letter-spacing: -0.05em; color: var(--orange); }
.pcard__metric span { font-size: 14px; color: rgba(255, 255, 255, 0.6); text-align: right; }
.pcard__cta { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 6px 0 20px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 16px/1 var(--display); letter-spacing: -0.01em; transition: scale 0.3s var(--spring); }
.pcard__cta:hover { scale: 1.03; transition: scale 0.6s var(--spring); }
.pcard__cta i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; }

/* Uzmanlık ızgarası */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature { display: flex; flex-direction: column; padding: 50px 50px 46px; background: var(--gray); transition: background-color 0.25s; }
.feature:hover { background: var(--gray-2); }
.feature__media { aspect-ratio: 320 / 267; overflow: hidden; margin-bottom: 32px; }
.feature > p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: #77757c; }

/* Detaylar */
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 62px; }
.detail h3 { display: flex; align-items: center; gap: 8px; font: 600 20px/1.1 var(--display); letter-spacing: -0.01em; }
.detail h3 svg { width: 20px; height: 20px; flex: none; }
.detail p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #77757c; }

/* Büyük alıntı */
.quote { padding: 40px 0 200px; }
.quote blockquote { margin: 0 auto; max-width: 760px; text-align: center; }
.quote p { font: 750 72px/1 var(--display); letter-spacing: -0.04em; }
.hl { display: inline-block; padding: 0 10px; margin: 0 -2px; color: var(--ink); background: none; font-family: 'Bagel Fat One', var(--display); font-weight: 400; letter-spacing: -0.02em; transform: rotate(-2deg); text-shadow: 0 0 0 transparent; position: relative; z-index: 0; }
.hl::before { content: ''; position: absolute; inset: 8% -2px 2%; z-index: -1; border-radius: 22px; transform: rotate(1deg); }
.hl--blue::before { background: var(--blue); box-shadow: 0 0 0 4px #7fd9ff; }
.hl--orange::before { background: var(--orange); box-shadow: 0 0 0 4px var(--lavender-2); }
.quote__author { display: inline-flex; align-items: center; gap: 16px; margin-top: 40px; padding: 14px 30px 14px 16px; border: 1px solid var(--line); text-align: left; font-size: 15px; color: var(--muted); line-height: 1.3; }
.quote__author strong { display: block; color: var(--ink); }
.quote__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 14px/1 var(--display); }

/* Ölçek ızgarası */
.scale { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
.scale__media { aspect-ratio: 332 / 414; overflow: hidden; background: var(--gray); }
.scale__item h3 { display: flex; align-items: center; gap: 8px; margin-top: 20px; font: 600 20px/1.2 var(--display); letter-spacing: -0.01em; }
.scale__item h3 svg { width: 20px; height: 20px; }
.scale__item p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #77757c; }

/* Yatay kart kaydırıcı */
.slider__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2)); scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slide { flex: none; width: 460px; min-height: 606px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 50px; border-radius: var(--r); background: var(--gray); }
.slide--purple { background: var(--purple); color: #fff; }
.slide--blue { background: #dff4ff; }
.slide--orange { background: #FFE8DE; }
.slide > p { margin-top: 18px; font-size: 15px; line-height: 1.55; opacity: 0.8; }
.slide__visual { height: 300px; margin-bottom: 64px; display: grid; place-items: center; border-radius: 4px; background: rgba(255, 255, 255, 0.5); overflow: hidden; }
.slide--purple .slide__visual { background: rgba(255, 255, 255, 0.18); }
.slider__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
/* Neden Netio: dikey kaydırma kartları yatay ilerletir, bölüm sabit kalır */
.pinslider.is-pinned { height: var(--ps-h, 300vh); }
.pinslider.is-pinned .pinslider__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; overflow: hidden; }
.pinslider.is-pinned .head { margin-bottom: 36px; }
.pinslider.is-pinned .slider__track { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
.pinslider.is-pinned .slide { min-height: min(606px, calc(100vh - 340px)); }

.avatars { display: flex; }
.avatars span { display: grid; place-items: center; width: 64px; height: 64px; margin-left: -10px; border-radius: 50%; border: 3px solid var(--purple); background: hsl(calc(14 + var(--j) * 7) 95% calc(58% + var(--j) * 4%)); color: var(--ink); font: 800 24px/1 var(--display); animation: bob 2.4s var(--ease-io) infinite; animation-delay: calc(var(--j) * 0.15s); }
.avatars span:nth-child(odd) { background: var(--orange); }
@keyframes bob { 50% { transform: translateY(-8px); } }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 86%; }
.board div { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 10px; background: #fff; font-size: 12px; }
.board b { font-weight: 600; }
.board i { height: 34px; border-radius: 6px; background: var(--gray); }
.board div:last-child i { background: var(--orange); }
.comment { width: 82%; padding: 18px; border-radius: 16px; background: #fff; font-size: 14px; position: relative; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.18); }
.comment p + p { margin-top: 10px; }
.comment__reply { color: #0b7db0; }
.comment__pin { position: absolute; top: -14px; left: -14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--blue); color: #fff; font: 700 13px/1 var(--display); }
.mini-chart { display: flex; align-items: flex-end; gap: 10px; width: 80%; height: 200px; }
.mini-chart i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: var(--ink); transform-origin: bottom; animation: grow 1s var(--ease) both; animation-delay: calc(var(--j) * 80ms); }
.mini-chart i:last-child { background: var(--purple); }
@keyframes grow { from { transform: scaleY(0); } }

/* Referans kutusu */
.loved { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 80px 86px 100px; background: var(--gray); }
.loved h2 { margin: 28px 0 32px; font-size: 40px; line-height: 0.95; letter-spacing: -0.04em; }
.mascots { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; max-width: 460px; height: 200px; margin-left: auto; }
.mascot { flex: none; height: auto; filter: drop-shadow(0 0 0 #fff) drop-shadow(4px 4px 0 #fff) drop-shadow(-4px -4px 0 #fff) drop-shadow(4px -4px 0 #fff) drop-shadow(-4px 4px 0 #fff) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.12)); animation: bob 2.8s var(--ease-io) infinite; }
.mascot--n { width: 23%; rotate: -6deg; }
.mascot--e { width: 20%; margin-bottom: 30px; rotate: 6deg; animation-delay: -0.6s; }
.mascot--t { width: 13%; margin-bottom: 4px; rotate: -4deg; animation-delay: -1.2s; }
.mascot--i { width: 9%; margin-bottom: 14px; rotate: 6deg; animation-delay: -1.8s; }
.mascot--o { width: 20%; margin-bottom: 8px; rotate: -5deg; animation-delay: -2.4s; }
.mascot__eyes { animation: blink 4s infinite; transform-origin: center 70px; transform-box: fill-box; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.duo__card { display: flex; flex-direction: column; align-items: flex-start; min-height: 272px; padding: 50px; border-radius: var(--r); transition: transform 0.3s var(--ease); }
.duo__card:hover { transform: translateY(-4px); }
.duo__card--lavender { background: var(--lavender-2); }
.duo__card--lilac { background: var(--lilac); }
.duo__card .pill { font-size: 16px; height: 28px; }
.duo__card h3 { margin-top: 24px; font-size: 36px; line-height: 0.98; letter-spacing: -0.04em; }
.duo__link { margin-top: 16px; font: 600 16px/1 var(--display); }

/* Alt bilgi: gri blok, arkadaki sabit siyah alanın üstünden kayar */
main, .footer__sheet { position: relative; z-index: 1; }
.footer { padding-bottom: var(--reveal-h, 640px); }
.footer__sheet { background: var(--gray); border-radius: 0 0 80px 80px; padding: 160px var(--gutter) 98px; }
.footer__cta { text-align: center; }
.footer__cta h2 { font-size: 80px; line-height: 1; letter-spacing: -0.045em; }
.footer__cta p { margin-top: 16px; font-size: 18px; }
.footer__cta .btn { margin-top: 36px; height: 60px; font-size: 20px; }
.footer__cols { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 28px; max-width: 1120px; margin: 128px auto 0; }
.footer__contact a { white-space: nowrap; }
.footer__contact span { max-width: 260px; line-height: 1.45; color: var(--ink-2); }
.footer__cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; font-size: 16px; line-height: 1.3; min-width: 0; }
.footer__cols h3 { font: 600 18px/1 var(--display); letter-spacing: -0.02em; margin-bottom: 14px; }
.footer__cols a { overflow-wrap: anywhere; }
.footer__cols a:hover { color: #ff5a1f; }
.ext { font-size: 0.9em; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; max-width: var(--wrap); margin: 120px auto 0; font-size: 16px; }
.footer__social { display: flex; gap: 32px; }
.footer__social a { transition: transform 0.2s var(--ease); }
.footer__social a:hover { transform: scale(1.15); }
.footer__note { max-width: var(--wrap); margin: 56px auto 0; font-size: 12px; line-height: 1.5; color: #97979b; letter-spacing: 0; }
.footer__note a { text-decoration: underline; }

/* Siyah alan içeriğe göre boyutlanır: başlığın üstünde 240, formun altında 260px boşluk (Jitter ölçüsü) */
.reveal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--reveal-h, 760px); display: grid; place-items: start center; background: #000; color: #fff; }
.reveal--static { position: relative; height: auto; }
.reveal__inner { display: grid; grid-template-columns: 1fr 440px; align-items: center; gap: 80px; width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); padding: 240px var(--gutter) 260px; }
.reveal__news h2 { font-size: 40px; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.news { position: relative; display: flex; margin-top: 40px; }
.news input { flex: 1; min-width: 0; height: 52px; padding: 0 240px 0 24px; border: 1px solid #3c3a41; border-radius: 0; background: #2a282e; color: #fff; font: 400 17px/1 var(--body); }
.news input::placeholder { color: #9a98a0; }
.news input:focus { outline: none; border-color: #77757c; }
.news button { position: absolute; right: 0; top: 0; height: 52px; width: 203px; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); font: 600 18px/1 var(--display); letter-spacing: -0.02em; transition: transform 0.25s var(--ease); }
.news button:hover { transform: scale(1.03); }
.news button:disabled { opacity: 0.6; }
.news__msg { margin-top: 14px; min-height: 1.5em; font-size: 16px; color: #d6d4da; }

/* Bülten alanındaki, sürekli stil değiştiren logo etiketi */
/* Footer etiket yığını: 8 etiket 0,5 sn arayla öncekinin üstüne yapışır (JS yönetir), 4 sn'de döngü */
.sticker { position: relative; height: 210px; }
.stk { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; will-change: transform, opacity; }
.stk .logo { width: 220px; height: auto; }
.stk--code span { display: inline-flex; align-items: center; padding: 16px 26px; border-radius: 18px; background: var(--ink); border: 4px solid var(--purple); box-shadow: 0 0 0 5px #fff; color: #fff; font: 700 46px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: -0.02em; }
.stk--code b { color: var(--purple); font-weight: 700; }
.stk-post { width: 220px; padding: 12px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 0 0 5px var(--purple); }
.stk-post header { display: flex; align-items: center; gap: 8px; font: 700 14px/1.1 var(--display); }
.stk-post header i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; }
.stk-post header i svg { width: 13px; }
.stk-post header small { display: block; font: 500 11px var(--body); color: #8a888f; }
.stk-post__img { display: grid; place-items: center; height: 104px; margin-top: 10px; border-radius: 10px; background: linear-gradient(135deg, #ffd2ba, #FF5A1F); color: var(--ink); }
.stk-post__img .logo { width: 130px; }
.stk-post footer { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 13px var(--display); }
.stk-post footer svg { width: 18px; color: #FF3D7F; }
.stk--like span { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px; border-radius: 44px; background: #FF3D7F; color: #fff; box-shadow: 0 0 0 5px #fff; }
.stk--like span::after { content: ''; position: absolute; left: 34px; bottom: -16px; border: 12px solid transparent; border-top: 16px solid #FF3D7F; border-bottom: 0; filter: drop-shadow(0 4px 0 #fff); }
.stk--like span > svg:first-child { width: 36px; }
.stk--like .logo { width: 150px; }
.stk--grow span { display: inline-flex; align-items: center; gap: 16px; padding: 14px 26px; border-radius: 999px; background: #C8F169; color: var(--ink); box-shadow: 0 0 0 5px #fff; }
.stk--grow .logo { width: 140px; }
.stk--grow em { font: 800 32px/1 var(--display); font-style: normal; letter-spacing: -0.03em; }
.stk-video { position: relative; width: 250px; height: 150px; border-radius: 16px; overflow: hidden; background: radial-gradient(90% 90% at 80% 0%, #2a2440 0%, transparent 60%), var(--ink); box-shadow: 0 0 0 5px var(--blue); }
.stk-video__play { position: absolute; left: 50%; top: 44%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; color: var(--ink); }
.stk-video__play svg { width: 24px; margin-left: 3px; }
.stk-video__bar { position: absolute; left: 14px; right: 14px; bottom: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.stk-video__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 2px; background: var(--blue); }
.stk-video__bar i::after { content: ''; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.stk-video__meta { position: absolute; left: 14px; right: 14px; bottom: 11px; display: flex; justify-content: space-between; font: 600 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, 0.7); }
.stk-video__meta b { color: #fff; font-weight: 700; }
.stk--tape span { display: grid; place-items: center; padding: 22px 34px; background: var(--orange); color: var(--ink); box-shadow: 8px 8px 0 #fff; }
.stk--tape .logo { width: 200px; }
.stk-toast { display: flex; align-items: center; gap: 12px; width: 300px; padding: 12px 16px 12px 12px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 0 0 5px #fff, 10px 12px 0 5px #FF3D7F; }
.stk-toast > i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--purple); color: #fff; }
.stk-toast > i svg { width: 20px; }
.stk-toast > span { flex: 1; font: 500 15px/1.25 var(--body); }
.stk-toast b { font-weight: 800; }
.stk-toast time { align-self: flex-start; font: 500 11px/1.3 var(--body); color: #8a888f; }
.stk--final { color: #fff; }
.stk--final .logo { width: 260px; filter: drop-shadow(0 0 0 var(--purple)) drop-shadow(7px 0 0 var(--purple)) drop-shadow(-7px 0 0 var(--purple)) drop-shadow(0 7px 0 var(--purple)) drop-shadow(0 -7px 0 var(--purple)) drop-shadow(10px 12px 0 var(--ink)); }
.spark { position: absolute; z-index: 2; font-style: normal; font-size: 30px; line-height: 1; color: #fff; opacity: 0; }
.spark--violet { color: var(--purple); font-size: 34px; }


/* İç sayfalar */
.page-head { padding: 34px 0 80px; }
.page-head h1 { font-size: 80px; line-height: 0.9; letter-spacing: -0.045em; }
.page-head .pill + h1 { margin-top: 20px; }
.page-head p { margin-top: 28px; max-width: 540px; font-size: 18px; line-height: 27px; }
.page-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.page-head--center p { margin-inline: auto; }
.page-head .btn { margin-top: 36px; }
.back { display: block; width: fit-content; margin-bottom: 24px; font: 600 16px/1 var(--display); color: var(--muted); }
.back:hover { color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: 12px 56px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { margin: 4px 0 0; font: 600 18px/1.3 var(--display); }
.showcase { display: grid; place-items: center; padding: 80px 0; background: var(--gray); }
.showcase__poster { width: min(420px, 80%); aspect-ratio: 4 / 5; overflow: hidden; background: var(--c); box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.3); }
.showcase__poster > img, .showcase__poster > video { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 600px; margin: 100px auto 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.prose h2 { font-size: 40px; line-height: 1; letter-spacing: -0.035em; color: var(--ink); margin: 56px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid .card__stage { height: 420px; }
.grid .card__poster { width: 230px; }
.grid__cell[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 48px; }
.filter { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--gray); font: 600 16px/1 var(--display); letter-spacing: -0.02em; transition: background-color 0.2s, color 0.2s; }
.filter span { margin-left: 4px; opacity: 0.5; }
.filter:hover { background: var(--gray-2); }
.filter.is-active { background: var(--ink); color: #fff; }

.service-list { display: grid; gap: 20px; }
.service { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 50px; border-radius: var(--r); background: var(--gray); scroll-margin-top: 40px; }
.service:nth-child(4n + 1) { background: var(--gray); }
.service:nth-child(4n + 2) { background: #dff4ff; }
.service:nth-child(4n + 3) { background: var(--lilac); }
.service:nth-child(4n + 4) { background: #FFE8DE; }
.service h2 { font-size: 40px; line-height: 0.98; letter-spacing: -0.04em; margin-top: 18px; }
.service__tag { margin-top: 14px; font: 600 18px/1.35 var(--display); }
.service__text > p:not(.service__tag) { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #6c6a71; }
.service .btn { margin-top: 28px; }
.service__visual { aspect-ratio: 4 / 5; overflow: hidden; }
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.process li { padding: 40px; border-radius: var(--r); background: var(--gray); }
.process li > span { font: 600 20px/1 var(--display); }
.process h3 { margin-top: 60px; font-size: 32px; letter-spacing: -0.035em; }
.process p { margin-top: 10px; font-size: 15px; color: #6c6a71; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 30px; border-radius: 32px; background: var(--gray); }
.plan--hot { background: var(--purple); color: #fff; }
.plan__badge { align-self: flex-start; margin-bottom: 18px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--orange); color: var(--ink); font: 600 13px/1 var(--display); }
.plan h3 { font-size: 28px; letter-spacing: -0.03em; }
.plan__desc { margin-top: 8px; font-size: 15px; line-height: 1.45; opacity: 0.75; min-height: 44px; }
.plan__price { margin: 28px 0 24px; display: flex; align-items: baseline; gap: 4px; }
.plan__price strong { font: 800 44px/1 var(--display); letter-spacing: -0.045em; }
.plan__price span { opacity: 0.7; font-size: 16px; }
.plan .btn { height: 48px; font-size: 16px; }
.plan ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; font-size: 15px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { width: 20px; height: 20px; flex: none; }

/* Lizgo tanıtımı: Lizgo'nun tasarım dili (Sage #F4F5F0, lime ışıltı, Inter Display/Inter Tight (kit yazı tipi), Deep Teal #1E4A4A, beyaz yuvarlak kartlar) */
.lz { --lz-teal: #1e4a4a; --lz-lime: #8fd21f; --lz-bg: #f4f5f0; --lz-mute: #5d6b68; --lz-line: #e3e8e2; position: relative; overflow: hidden; margin: 0 12px; border-radius: 40px; background: var(--lz-bg); color: #14211f; font-family: var(--body, 'Inter', system-ui, sans-serif); }
.lz h1, .lz h2, .lz h3 { font-family: var(--display); color: var(--lz-teal); letter-spacing: -0.03em; }
.lz-hero { position: relative; padding: 56px 0 90px; text-align: center; background: radial-gradient(45% 35% at 50% 62%, rgba(143, 210, 31, 0.32), transparent 70%), radial-gradient(40% 30% at 15% 78%, rgba(30, 74, 74, 0.18), transparent 70%), radial-gradient(40% 30% at 85% 75%, rgba(143, 210, 31, 0.22), transparent 70%); }
.lz-back { display: inline-block; margin-bottom: 28px; font-size: 14px; color: var(--lz-mute); } .lz-back:hover { color: var(--lz-teal); }
.lz-logo { display: block; height: 40px; width: auto; margin: 0 auto 30px; }
.lz-hero h1 { font-size: clamp(44px, 6vw, 84px); line-height: 1.02; font-weight: 900; }
.lz-hero mark { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; }
.lz-hero mark::after { content: ''; position: absolute; z-index: -1; left: -0.05em; right: -0.05em; bottom: 0.06em; height: 0.3em; border-radius: 0.08em; background: var(--lz-lime); opacity: 0.85; transform-origin: left; animation: lz-mark 1s var(--ease-expo, ease) 0.3s both; }
@keyframes lz-mark { from { transform: scaleX(0); } }
.lz-hero p { max-width: 540px; margin: 22px auto 0; font-size: 18px; line-height: 1.6; color: var(--lz-mute); }
.lz-cta { margin-top: 30px; }
.lz-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 12px; background: var(--lz-teal); color: #fff; font: 700 16px/1 var(--display); transition: transform 0.3s var(--spring); }
.lz-btn:hover { transform: translateY(-2px); }
.lz-btn--lime { height: 56px; padding: 0 28px; background: var(--lz-lime); color: var(--lz-teal); font-size: 17px; }
.lz-btn.is-soon { cursor: default; } .lz-btn.is-soon:hover { transform: none; }
.lz-note { display: block; margin-top: 16px; font-size: 13px; color: var(--lz-mute); }
/* vitrin: beyaz panel, solda metin, sağda Lizgo kartı */
.lz-stage { margin-top: 60px; max-width: calc(1080px + var(--gutter) * 2); }
.lz-panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 44px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -40px rgba(30, 74, 74, 0.35); text-align: left; }
.lz-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--lz-teal); }
.lz-tag i { width: 22px; height: 22px; border-radius: 7px; background: var(--lz-teal); box-shadow: inset 0 0 0 6px var(--lz-teal), inset 0 0 0 20px var(--lz-lime); }
.lz-panel h2 { margin-top: 14px; font-size: clamp(28px, 3vw, 40px); font-weight: 900; line-height: 1.08; }
.lz-panel p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--lz-mute); }
.lz-card { position: relative; padding: 20px; border-radius: 20px; background: #f7f8f7; box-shadow: inset 0 0 0 1px var(--lz-line); }
.lz-card__head { display: flex; justify-content: space-between; align-items: baseline; }
.lz-card__head b { font-size: 16px; font-weight: 900; color: var(--lz-teal); } .lz-card__head span { font-size: 13px; color: var(--lz-mute); }
@property --st { syntax: '<integer>'; initial-value: 1; inherits: false; }
.lz-step { font-style: normal; counter-reset: st var(--st); animation: lz-st 8s steps(3, jump-none) infinite; } .lz-step::after { content: counter(st); }
@keyframes lz-st { 0%, 10% { --st: 1; } 40% { --st: 2; } 70%, 100% { --st: 4; } }
.lz-card__bar { display: flex; gap: 6px; margin: 12px 0 14px; }
.lz-card__bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--lz-line); position: relative; overflow: hidden; }
.lz-card__bar i::after { content: ''; position: absolute; inset: 0; background: var(--lz-teal); transform-origin: left; transform: scaleX(0); animation: lz-bar 8s infinite; }
.lz-card__bar i:nth-child(2)::after { animation-delay: 0.6s; } .lz-card__bar i:nth-child(3)::after { animation-delay: 1.2s; } .lz-card__bar i:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes lz-bar { 0%, 5% { transform: scaleX(0); } 20%, 90% { transform: none; } 100% { transform: scaleX(0); } }
.lz-item { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(30, 74, 74, 0.4); opacity: 0; transform: translateY(8px); animation: lz-item 8s var(--ease-expo, ease) infinite; animation-delay: calc(0.5s + var(--k) * 0.7s); }
@keyframes lz-item { 0% { opacity: 0; transform: translateY(8px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lz-item i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #eef5e4; font-style: normal; }
.lz-item span { display: grid; gap: 3px; } .lz-item b { font-size: 14px; color: var(--lz-teal); } .lz-item em { font-size: 12px; font-style: normal; color: var(--lz-mute); }
.lz-item strong { margin-left: auto; font-size: 14px; color: var(--lz-teal); }
.lz-card__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--lz-line); }
.lz-card__sum span { font-size: 13px; color: var(--lz-mute); } .lz-card__sum b { font-size: 26px; font-weight: 900; color: var(--lz-teal); }
.lz-card__go { position: relative; display: grid; place-items: center; height: 46px; margin-top: 12px; border-radius: 12px; background: var(--lz-lime); color: var(--lz-teal); font-weight: 900; font-size: 15px; animation: lz-press 8s infinite; }
@keyframes lz-press { 0%, 60% { transform: none; } 63% { transform: scale(0.97); } 66%, 100% { transform: none; } }
.lz-receipt { position: absolute; right: -14px; bottom: -16px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px -10px rgba(30, 74, 74, 0.45); font-size: 12px; font-weight: 700; color: var(--lz-teal); opacity: 0; transform: translateY(8px); animation: lz-rec 8s var(--ease-expo, ease) infinite; }
@keyframes lz-rec { 0%, 64% { opacity: 0; transform: translateY(8px); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* vitrin akışı: sekmeler + değişen metin ve kart */
.lz-flow__tabs { display: inline-flex; gap: 6px; padding: 6px; margin-bottom: 18px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -16px rgba(30, 74, 74, 0.4); }
.lz-flow__tabs button { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; background: none; color: var(--lz-mute); font: 700 14px/1 var(--display); cursor: pointer; overflow: hidden; transition: background 0.3s, color 0.3s; }
.lz-flow__tabs button i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef3ee; font-style: normal; font-size: 13px; }
.lz-flow__tabs button.is-on { background: var(--lz-teal); color: #fff; } .lz-flow__tabs button.is-on i { background: var(--lz-lime); color: var(--lz-teal); }
.lz-flow__prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lz-lime); transform-origin: left; transform: scaleX(0); }
.lz-flow__tabs button.is-on .lz-flow__prog { animation: lz-prog var(--lzdur, 5s) linear both; }
.lz-stage.is-hold .lz-flow__prog { animation-play-state: paused; }
@keyframes lz-prog { to { transform: scaleX(1); } }
.lz-panel__copy, .lz-cards { display: grid; }
.lz-copy, .lz-cards > .lz-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.45s, transform 0.6s var(--ease-expo, ease), visibility 0s 0.45s; }
.lz-copy.is-on, .lz-cards > .lz-card.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s 0.1s, transform 0.6s var(--ease-expo, ease) 0.1s, visibility 0s; }
.lz-cards > .lz-card .lz-item, .lz-cards > .lz-card .lz-toggle, .lz-kpis span { opacity: 0; transform: translateY(8px); }
.lz-cards > .lz-card.is-on .lz-item, .lz-cards > .lz-card.is-on .lz-toggle, .lz-card.is-on .lz-kpis span { animation: lz-in 0.6s var(--ease-expo, ease) both; animation-delay: calc(0.25s + var(--k, 0) * 0.15s); }
@keyframes lz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lz-cards > .lz-card .lz-card__bar i::after, .lz-cards > .lz-card .lz-card__go, .lz-cards > .lz-card .lz-receipt { animation: none; }
.lz-card.is-on .lz-card__bar i::after { animation: lz-fill 0.5s var(--ease-expo, ease) both; }
.lz-card.is-on .lz-card__bar i:nth-child(2)::after { animation-delay: 0.3s; } .lz-card.is-on .lz-card__bar i:nth-child(3)::after { animation-delay: 0.6s; } .lz-card.is-on .lz-card__bar i:nth-child(4)::after { animation-delay: 0.9s; }
@keyframes lz-fill { from { transform: scaleX(0); } to { transform: none; } }
.lz-card.is-on .lz-receipt { animation: lz-pop 0.6s var(--ease-expo, ease) 1.6s both; }
@keyframes lz-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lz-item i.ok { background: rgba(143, 210, 31, 0.25); color: #3d6a0c; font-weight: 900; } .lz-item i.warn { background: #fde8e6; color: #c8443a; font-weight: 900; }
.lz-pill { padding: 5px 10px; border-radius: 99px; font-size: 12px !important; } .lz-pill--ok { background: rgba(143, 210, 31, 0.25); color: #3d6a0c !important; }
.lz-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 12px; border-radius: 14px; background: #fff; }
.lz-toggle span { display: grid; gap: 3px; } .lz-toggle b { font-size: 14px; color: var(--lz-teal); } .lz-toggle em { font-size: 12px; font-style: normal; color: var(--lz-mute); }
.lz-toggle i { position: relative; width: 40px; height: 24px; border-radius: 99px; background: #d5ddd6; }
.lz-toggle i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.lz-card.is-on .lz-toggle i { animation: lz-tg 0.4s ease 1.2s both; } .lz-card.is-on .lz-toggle i::after { animation: lz-tgk 0.4s ease 1.2s both; }
@keyframes lz-tg { to { background: var(--lz-teal); } } @keyframes lz-tgk { to { transform: translateX(16px); } }
.lz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.lz-kpis span { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; }
.lz-kpis em { font-size: 12px; font-style: normal; color: var(--lz-mute); } .lz-kpis b { font-size: 17px; font-weight: 900; color: var(--lz-teal); }
.lz-kpis .is-dark { background: var(--lz-teal); } .lz-kpis .is-dark em { color: rgba(255, 255, 255, 0.6); } .lz-kpis .is-dark b { color: var(--lz-lime); }
.lz-split { display: flex; gap: 4px; height: 10px; margin-top: 14px; }
.lz-split i { width: var(--w); border-radius: 4px; background: var(--lz-teal); transform-origin: left; } .lz-split i:nth-child(2) { background: var(--lz-lime); } .lz-split i:nth-child(3) { background: #cfd8d2; }
.lz-card.is-on .lz-split i { animation: lz-fill 0.8s var(--ease-expo, ease) 0.5s both; }
.lz-split__key { display: flex; gap: 14px; margin: 8px 0 4px; font-size: 11px; color: var(--lz-mute); }
.lz-split__key span { display: flex; align-items: center; gap: 5px; } .lz-split__key i { width: 8px; height: 8px; border-radius: 2px; background: var(--lz-teal); }
.lz-split__key span:nth-child(2) i { background: var(--lz-lime); } .lz-split__key span:nth-child(3) i { background: #cfd8d2; }
.lz-chan { display: flex; gap: 6px; }
.lz-chan span { padding: 8px 14px; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 700; color: var(--lz-mute); }
.lz-chan .is-on { background: var(--lz-teal); color: #fff; }
.lz-msg { margin-top: 16px; max-width: 88%; padding: 14px 16px; border-radius: 4px 18px 18px 18px; background: #fff; box-shadow: 0 8px 20px -14px rgba(30, 74, 74, 0.5); opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: top left; }
.lz-msg b { font-size: 12px; color: #4e8a2a; } .lz-msg p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--lz-teal); } .lz-msg em { display: block; margin-top: 6px; text-align: right; font-size: 11px; font-style: normal; color: #4fb3e8; }
.lz-msg--2 { margin-left: 0; max-width: 70%; }
.lz-card.is-on .lz-msg { animation: lz-msg 0.6s var(--spring, ease) 0.4s both; } .lz-card.is-on .lz-msg--2 { animation-delay: 1.4s; }
@keyframes lz-msg { to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .lz-flow__tabs button span { display: none; } .lz-flow__tabs button { padding: 0 8px; } .lz-item strong { white-space: nowrap; } .lz-card__head { flex-wrap: wrap; gap: 4px; } .lz-receipt { right: 4px; bottom: -22px; } }

/* adımlar */
.lz-sec { padding: 30px 0 80px; }
.lz-head { margin-bottom: 36px; text-align: center; } .lz-head h2 { font-size: clamp(32px, 3.6vw, 50px); font-weight: 900; line-height: 1.06; }
.lz-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: calc(1080px + var(--gutter) * 2); }
.lz-steps li { padding: 24px 22px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -32px rgba(30, 74, 74, 0.4); }
.lz-steps span { font-size: 13px; color: var(--lz-mute); }
.lz-steps h3 { margin-top: 10px; font-size: 24px; font-weight: 900; }
.lz-steps p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--lz-mute); }
.lz-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.lz-types b { padding: 9px 14px; border-radius: 999px; background: #e6efe6; font-size: 13px; font-weight: 700; color: var(--lz-teal); }
/* kapanış: yazıcıdan çıkan davet fişi */
.lz-end { padding: 40px 0 100px; }
.lz-end__in { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: calc(1080px + var(--gutter) * 2); padding: 60px 56px 0; border-radius: 32px; background: radial-gradient(60% 80% at 80% 20%, rgba(143, 210, 31, 0.3), transparent 70%), #fff; box-shadow: 0 40px 80px -50px rgba(30, 74, 74, 0.45); overflow: hidden; }
.lz-end__text { padding-bottom: 60px; }
.lz-end h2 { margin-top: 16px; font-size: clamp(32px, 3.6vw, 50px); font-weight: 900; line-height: 1.04; }
.lz-end p { margin-top: 14px; max-width: 420px; font-size: 17px; line-height: 1.6; color: var(--lz-mute); }
.lz-end .lz-btn { margin-top: 26px; }
.lz-end .lz-by { display: block; margin-top: 26px; text-align: left; font-size: 13px; color: var(--lz-mute); } .lz-end .lz-by b { color: var(--lz-teal); }
.lz-intro { position: relative; display: block; align-self: center; justify-self: center; width: min(460px, 100%); aspect-ratio: 1; margin-bottom: 50px; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(30, 74, 74, 0.55); transition: transform 0.4s var(--spring); }
.lz-intro:hover { transform: translateY(-4px) rotate(-1deg); }
.lz-intro canvas { display: block; width: 100%; height: 100%; }
.lz-intro__url { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--lz-teal); font: 700 13px/1 var(--display); box-shadow: 0 6px 16px -8px rgba(30, 74, 74, 0.4); }
.lz-intro__url i { font-style: normal; }
@media (max-width: 900px) {
  .lz-panel { grid-template-columns: minmax(0, 1fr); padding: 26px; }
  .lz-steps { grid-template-columns: 1fr 1fr; }
  .lz-end__in { grid-template-columns: minmax(0, 1fr); padding: 40px 26px 0; gap: 10px; }
  .lz-end__text { padding-bottom: 10px; }
}
@media (max-width: 560px) {
  .lz { margin: 0 8px; border-radius: 28px; }
  .lz-steps { grid-template-columns: minmax(0, 1fr); }
  .lz-receipt { right: 4px; }
}

/* Çözümler sayfası */
.sl-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(640px, 100%); margin: 36px auto 0; }
.sl-switch a { position: relative; display: grid; gap: 6px; padding: 20px 22px; border-radius: 22px; background: var(--gray); text-align: left; transition: background 0.3s, transform 0.4s var(--spring); }
.sl-switch a:hover { background: var(--lilac); transform: translateY(-2px); }
.sl-switch b { font: 700 18px/1.1 var(--display); letter-spacing: -0.02em; } .sl-switch span { font-size: 14px; color: var(--ink-2); }
.sl-switch i { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff9a62, #ff5a1f); color: #fff; font-style: normal; font-size: 14px; }
.sl-sec { scroll-margin-top: 30px; }
.sl-head { align-items: flex-end; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2 - 40px); margin-inline: auto; }
.sl-head p { max-width: 380px; margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 640px) { .sl-switch { grid-template-columns: minmax(0, 1fr); } .sl-head { flex-direction: column; align-items: flex-start; } }
/* Çözümler · ürün ve özel yazılım (Netio kart dili) */
.sl-prod { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 50px; border-radius: var(--r); background: var(--gray); }
.sl-prod__logo { display: block; height: 52px; width: auto; margin-top: 30px; }
.sl-prod__lead { margin-top: 18px; max-width: 440px; font: 600 22px/1.3 var(--display); letter-spacing: -0.02em; }
.sl-prod ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.sl-prod li { display: flex; gap: 10px; font-size: 16px; color: var(--ink-2); }
.sl-prod li::before { content: '✓'; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--orange); font: 800 11px/1 var(--display); }
.sl-prod__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.sl-prod__site { font: 600 16px/1 var(--display); border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.sl-prod__site:hover { color: var(--orange); }
.sl-prod__visual { display: block; aspect-ratio: 1; overflow: hidden; transition: scale 0.4s var(--spring); }
.sl-prod__visual:hover { scale: 1.02; }
.sl-prod__visual canvas { display: block; width: 100%; height: 100%; }
.sl-prod__visual, .lz-intro { position: relative; container-type: size; }
/* Lizgo arayüz kesitleri: ikon birleşip zemin açıldıktan sonra sırayla belirir, süzülür, döngü sonunda çekilir */
.lzk { position: absolute; display: grid; gap: 1.6cqw; padding: 2.6cqw; border-radius: 3.4cqw; background: #fff; color: #1e4a4a; font: 600 2.6cqw/1.2 var(--display); box-shadow: 0 3cqw 7cqw -3cqw rgba(30, 74, 74, 0.45); opacity: 0; transform: translateY(3cqw) scale(0.9); pointer-events: none; }
.lzk__tag { justify-self: start; padding: 0.9cqw 1.8cqw; border-radius: 99px; background: #1e4a4a; color: #fff; font-style: normal; font-size: 2.2cqw; font-weight: 700; }
.lzk__row { display: flex; align-items: center; gap: 1.6cqw; }
.lzk__row i { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.6cqw; background: #eef5e4; font-style: normal; font-size: 2.8cqw; }
.lzk__row i.ok { background: rgba(143, 210, 31, 0.3); color: #3d6a0c; font-weight: 900; } .lzk__row i.warn { background: #fde8e6; color: #c8443a; font-weight: 900; }
.lzk__row u { margin-left: auto; text-decoration: none; font-weight: 800; }
.lzk__btn { padding: 1.6cqw; border-radius: 1.6cqw; background: #8fd21f; text-align: center; font-weight: 800; }
.lzk__big { display: grid; font: 800 5cqw/1 var(--display); letter-spacing: -0.03em; } .lzk__big small { margin-top: 0.8cqw; font: 600 2.2cqw/1 var(--display); color: #6e8a88; }
.lzk__bars { display: flex; align-items: flex-end; gap: 0.9cqw; height: 9cqw; }
.lzk__bars i { flex: 1; height: var(--h); border-radius: 0.8cqw 0.8cqw 0.3cqw 0.3cqw; background: #cfe7a8; } .lzk__bars i:last-child { background: #8fd21f; }
.lzk { left: 50%; top: 50%; width: 44%; translate: -50% -50%; z-index: 1; }
.lz-intro .lzk { width: 58%; font-size: 3.4cqw; gap: 2cqw; padding: 3.2cqw; }
.lzk__row b { white-space: nowrap; }
/* oklar çıktıktan sonra ekranlar sırayla: kiralama → iade → finans; tur 8.6 sn (ikon çıkış ve dönüşüyle eş zamanlı) */
.sl-prod__visual.is-run .lzk, .lz-intro.is-run .lzk { animation: lzk 8.6s var(--ease-expo, ease) both; }
.sl-prod__visual.is-run .lzk--ret, .lz-intro.is-run .lzk--ret { animation-name: lzk2; } .sl-prod__visual.is-run .lzk--fin, .lz-intro.is-run .lzk--fin { animation-name: lzk3; }
@keyframes lzk { 0%, 10% { opacity: 0; transform: translateY(4cqw) scale(0.9); } 15%, 31% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-4cqw) scale(0.94); } }
@keyframes lzk2 { 0%, 34% { opacity: 0; transform: translateY(4cqw) scale(0.9); } 39%, 55% { opacity: 1; transform: none; } 59%, 100% { opacity: 0; transform: translateY(-4cqw) scale(0.94); } }
@keyframes lzk3 { 0%, 58% { opacity: 0; transform: translateY(4cqw) scale(0.9); } 63%, 79% { opacity: 1; transform: none; } 83%, 100% { opacity: 0; transform: translateY(-4cqw) scale(0.94); } }
.sl-prod__visual.is-run .lzk__bars i, .lz-intro.is-run .lzk__bars i { animation: lzk-bar 8.6s var(--ease-expo, ease) both; transform-origin: bottom; }
@keyframes lzk-bar { 0%, 61% { transform: scaleY(0); } 68%, 100% { transform: none; } }
.sl-next { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 26px 30px; border-radius: var(--r); border: 2px dashed var(--gray-2); font-size: 17px; transition: border-color 0.3s, background 0.3s; }
.sl-next:hover { border-color: var(--lavender); background: var(--lilac); }
.sl-next b { font-family: var(--display); }
.sl-next__dots { display: flex; gap: 5px; } .sl-next__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: sl-dot 1.2s ease-in-out infinite; } .sl-next__dots i:nth-child(2) { animation-delay: 0.15s; } .sl-next__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sl-dot { 50% { transform: translateY(-5px); opacity: 0.5; } }
.sl-next__go { margin-left: auto; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; transition: transform 0.4s var(--spring); }
.sl-next:hover .sl-next__go { transform: translateX(4px); }
.sl-custom h2 { margin-top: 20px; font-size: clamp(34px, 3.6vw, 52px); line-height: 0.98; letter-spacing: -0.045em; }
.sl-caps { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 14px; }
.sl-caps li { display: flex; gap: 14px; align-items: flex-start; }
.sl-caps i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--orange); font: 800 18px/1 var(--display); font-style: normal; }
.sl-caps span { font-size: 15px; line-height: 1.45; color: #6c6a71; } .sl-caps b { display: block; margin-bottom: 2px; font: 700 17px/1.2 var(--display); color: var(--ink); }
.sl-custom .hero__cta { margin-top: 0 !important; }
.sl-process { margin-top: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .sl-prod { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; }
  .sl-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .sl-process { grid-template-columns: minmax(0, 1fr); } .sl-next { flex-wrap: wrap; padding: 22px; } }

/* Hakkımızda */
/* Hakkımızda · sonuç bölümü (yörüngedeki kartlar) */
.grow { padding: 140px 0 120px; overflow: hidden; background: #0b0a0e; color: #fff; }
.grow__in { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); }
.grow__orbit { position: relative; height: 560px; perspective: 900px; }
.gw-core { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; justify-items: center; gap: 6px; width: 230px; padding: 22px 18px 20px; border-radius: 22px; background: linear-gradient(160deg, #1f1d25, #141218); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -20px rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%); text-align: center; }
.gw-core__av { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -48px; border-radius: 50%; background: linear-gradient(135deg, #ff9a62, #ff5a1f); box-shadow: 0 0 0 5px #141218; color: #fff; }
.gw-core__av svg { width: 26px; height: 26px; }
.gw-core small { margin-top: 6px; font: 600 10px/1 var(--display); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); }
.gw-core strong { font: 800 40px/1.05 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(100deg, #ffb27f, #ff5a1f 55%, #ff8a4f); -webkit-background-clip: text; background-clip: text; }
.gw-core em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.gw-card { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 600 13px/1.25 var(--display); color: #fff; will-change: transform, opacity; }
.gw-card img { object-fit: cover; }
.gw-card--comment, .gw-card--note { padding: 8px 14px 8px 8px; border-radius: 16px; background: rgba(34, 32, 40, 0.92); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 30px -12px rgba(0, 0, 0, 0.7); }
.gw-card--comment img, .gw-card--note img { width: 38px; height: 38px; border-radius: 50%; }
.gw-card--note img { border-radius: 10px; }
.gw-card span b { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.gw-card--av img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 14px 26px -10px rgba(0, 0, 0, 0.8); }
.gw-card--av i:not(.gw-ph) { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ff3d7f; font-style: normal; font-size: 12px; }
.gw-card--sq img { width: 58px; height: 58px; border-radius: 16px; }
.gw-card--pill { padding: 9px 14px; border-radius: 10px; color: #111; }
.gw-card--pill i { font-style: normal; font-weight: 800; margin-right: -7px; }
.gw-card--green { background: #7cf29c; } .gw-card--violet { background: #ffb48c; } .gw-card--orange { background: linear-gradient(100deg, #ff9a62, #ff5a1f); color: #fff; }
.gw-card--group { flex-direction: column; align-items: flex-start; gap: 6px; }
.gw-card--group span { display: flex; }
.gw-card--group span img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #0b0a0e; }
.gw-card--group span img + img { margin-left: -10px; }
.gw-ph { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font: 700 13px/1 var(--display); font-style: normal; color: #fff; }
.gw-ph--a { background: linear-gradient(135deg, #ff9a62, #e2400c); } .gw-ph--b { background: linear-gradient(135deg, #ff7aa8, #ff3d7f); } .gw-ph--c { background: linear-gradient(135deg, #2b2834, #1a1820); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .gw-ph--d { background: linear-gradient(135deg, #7cf29c, #2bbf8a); color: #0b2a1c; }
.gw-ph--sq { border-radius: 10px; font-size: 17px; }
.gw-ph--lg { width: 64px; height: 64px; font-size: 20px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 14px 26px -10px rgba(0, 0, 0, 0.8); }
.gw-ph--sm { width: 34px; height: 34px; font-size: 11px; box-shadow: 0 0 0 2px #0b0a0e; }
.gw-ph--sm + .gw-ph--sm { margin-left: -10px; }
.gw-ph--tile { width: 58px; height: 58px; border-radius: 16px; font-size: 18px; background: linear-gradient(135deg, #ff9a62, #ff5a1f); }
.gw-card--av .gw-heart { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ff3d7f; font-style: normal; font-size: 12px; }
.gw-card--group em { font-style: normal; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.grow__step { font: 600 12px/1 var(--display); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.grow__text h2 { margin-top: 16px; font: 700 clamp(36px, 3.6vw, 54px)/1.04 var(--display); letter-spacing: -0.035em; }
.grow__text mark { padding: 0 0.12em; border-radius: 6px; color: #ff6a2c; background: rgba(255, 90, 31, 0.16); }
.grow__text ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.grow__text li { display: flex; gap: 10px; font-size: 16px; color: rgba(255, 255, 255, 0.6); }
.grow__text li::before { content: '•'; color: rgba(255, 255, 255, 0.4); }
.grow__text li b { color: #fff; font-weight: 600; }
.grow__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.grow__tags span { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); font: 700 12px/1 var(--display); }
.grow__tags .is-y { background: #f5ff63; color: #111; } .grow__tags .is-o { background: rgba(255, 90, 31, 0.22); color: #ff8a4f; }
.grow__note { margin-top: 12px; font-size: 16px; color: #fff; }
.grow__btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; height: 48px; padding: 0 20px; border-radius: 14px; background: #1d1b22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; font: 600 15px/1 var(--display); transition: background 0.3s, transform 0.4s var(--spring); }
.grow__btn i { font-style: normal; color: #ff8a4f; }
.grow__btn:hover { background: linear-gradient(100deg, #ff9a62, #ff5a1f 55%, #e2400c); transform: translateY(-2px); }
.grow__btn:hover i { color: #fff; }

/* Hakkımızda · dalgalı kurdeleler */
.ribbons { position: relative; height: 360vh; background: #0b0a0e; }
.ribbons__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ribbons__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ribbons__end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 0 var(--gutter); pointer-events: none; }
.rb-final { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font: 600 clamp(26px, 3.4vw, 50px)/1 var(--display); letter-spacing: -0.03em; color: #fff; opacity: 0; }   /* yalnızca yerleşim ölçüsü için; görünen cümleyi tuval çizer */
.rb-chip { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.16em 0.34em 0.2em; border-radius: 0.22em; color: #111; }
.rb-chip b { font-weight: 600; }
.rb-chip--l { background: #ffb48c; } .rb-chip--o { background: #ff5a1f; color: #fff; }
@media (max-width: 640px) { .rb-final { flex-direction: column; gap: 10px; } }   /* telefonda üç satır: tek satıra sığmıyor */
.rb-title { font: 800 clamp(40px, 5.6vw, 88px)/0.98 var(--display); letter-spacing: -0.045em; color: #fff; text-align: center; opacity: var(--rt, 0); transform: translateY(calc((1 - var(--rt, 0)) * 60px)); }
@media (max-width: 900px) {
  .grow { padding: 90px 0 80px; }
  .grow__in { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .grow__orbit { height: 460px; order: 2; }
  .gw-core { z-index: 10; width: 190px; } .gw-core strong { font-size: 32px; }
  .ribbons { height: 330vh; }
}
@media (prefers-reduced-motion: reduce) { .ribbons { height: 100vh; } }

/* Hakkımızda · bir fikrin yolculuğu (çizgi) */
.lj { position: relative; padding: 120px 0 160px; }
.lj__head { text-align: center; margin-bottom: 10px; }
.lj__head .pill + h2 { margin-top: 18px; }
.lj__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lj__ghost { fill: none; stroke: var(--line); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.lj__path { fill: none; stroke: url(#lj-g); stroke: #ff5a1f; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.45)); }
.lj__stops { position: relative; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); }
.lj-stop { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; min-height: 72vh; }
.lj-stop.is-r .lj-stop__txt { order: 2; }
.lj-stop:first-child { min-height: 46vh; align-items: start; }
.lj-stop:first-child .lj-stop__vis { height: 300px; }
.lj-stop__txt { max-width: 420px; justify-self: center; opacity: 0.25; transform: translateY(20px); transition: opacity 0.5s, transform 0.7s var(--ease-expo); }
.lj-stop__txt span { font: 700 14px/1 var(--display); color: var(--orange); }
.lj-stop__txt h3 { margin-top: 10px; font: 800 clamp(34px, 3.6vw, 52px)/1 var(--display); letter-spacing: -0.04em; }
.lj-stop__txt p { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.lj-stop.is-on .lj-stop__txt { opacity: 1; transform: none; }
.lj-stop__vis { position: relative; display: grid; place-items: center; height: 420px; }
.lj-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--line); transition: background 0.3s, box-shadow 0.4s; z-index: 0; }
.lj-stop__vis > :not(.lj-dot) { position: relative; z-index: 1; }
.is-on > .lj-stop__vis .lj-dot, .lj-end.is-on .lj-dot { background: #ff5a1f; box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.2), 0 0 30px rgba(255, 90, 31, 0.6); }
.lj-stop__vis > :not(.lj-dot) { opacity: 0; transform: scale(0.85); transition: opacity 0.5s, transform 0.8s var(--ease-expo); }
.lj-stop.is-on .lj-stop__vis > :not(.lj-dot) { opacity: 1; transform: none; }
.lj-spark { display: grid; place-items: center; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 31, 0.25), transparent 65%); }
.lj-spark i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ff9a62 45%, #ff5a1f 70%); box-shadow: 0 0 50px 18px rgba(255, 90, 31, 0.45); animation: jy-pulse 1.6s ease-in-out infinite; }
.lj-sketch { width: min(420px, 90%); padding: 24px; border-radius: 22px; background: #fbf9f4; box-shadow: 0 30px 60px -30px rgba(25, 23, 28, 0.35); fill: none; stroke: #2c2a30; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.lj-stop.is-on .lj-sketch { stroke-dashoffset: 0; transition: opacity 0.5s, transform 0.8s var(--ease-expo), stroke-dashoffset 1.6s var(--ease) 0.2s; }
.lj-sketch .is-o { stroke: #ff5a1f; stroke-width: 10; }
.lj-paper { position: relative; width: 270px; padding: 14px; border-radius: 20px; background: #fbf9f4; box-shadow: 0 30px 60px -30px rgba(25, 23, 28, 0.35); }
.lj-paper .lj-sketch { width: 100%; padding: 0; background: none; box-shadow: none; }
.lj-sketch .is-thin { stroke-width: 2; opacity: 0.6; }
.lj-sketch rect.is-o { fill: none; stroke: #ff5a1f; stroke-width: 3; }
.lj-note { position: absolute; right: -30px; top: 56%; padding: 4px 10px; border-radius: 6px; background: #f5ff63; font: 600 13px/1 'Comic Sans MS', 'Bradley Hand', cursive; transform: rotate(6deg); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.3); }
/* tasarlanan post */
.lp { position: relative; width: 270px; aspect-ratio: 4 / 5; padding: 14px; border-radius: 18px; overflow: hidden; background: #19171c; color: #fff; font-size: 10px; box-shadow: 0 40px 70px -30px rgba(25, 23, 28, 0.55); text-align: left; }
.lp__img { position: relative; height: 49%; border-radius: 10px; overflow: hidden; background: linear-gradient(150deg, #ffd2ba 0%, #ff9a62 45%, #ff5a1f 100%); }
.lp__sun { position: absolute; right: 18%; top: 18%; width: 3.6em; height: 3.6em; border-radius: 50%; background: #f5ff63; box-shadow: 0 0 30px rgba(245, 255, 99, 0.7); }
.lp__wave { position: absolute; left: -10%; right: -10%; bottom: -20%; height: 60%; border-radius: 50% 50% 0 0; background: #19171c; opacity: 0.85; }
.lp__mark { position: absolute; left: 24px; top: 22px; padding: 3px 7px; border-radius: 6px; background: rgba(25, 23, 28, 0.6); font: 800 1.1em/1 var(--display); }
.lp__title { display: grid; margin-top: 1.3em; font: 800 2.9em/0.95 var(--display); letter-spacing: -0.04em; }
.lp__title em { font-style: normal; color: #ff5a1f; }
.lp__sub { margin-top: 0.7em; font: 500 1.2em/1.3 var(--display); color: rgba(255, 255, 255, 0.6); }
.lp__btn { position: absolute; left: 14px; bottom: 14px; padding: 0.7em 1.2em; border-radius: 999px; background: #ff5a1f; font: 700 1.2em/1 var(--display); }
.lp--sm { width: 100%; padding: 10px; border-radius: 10px; font-size: 8.4px; box-shadow: none; }
.lp--sm .lp__mark { left: 18px; top: 18px; } .lp--sm .lp__btn { left: 10px; bottom: 10px; }
/* tasarım aşaması: araçlar */
.lj-design { position: relative; }
.lj-guide { position: absolute; background: repeating-linear-gradient(var(--gd, 90deg), #01b2fd 0 6px, transparent 6px 10px); opacity: 0.8; }
.lj-guide--v { --gd: 180deg; left: 14px; top: -30px; bottom: -30px; width: 1px; }
.lj-guide--h { left: -30px; right: -30px; top: 51%; height: 1px; }
.lj-chip { position: absolute; left: -120px; top: 60%; padding: 7px 11px; border-radius: 8px; background: #fff; color: #19171c; font: 700 12px/1 var(--display); box-shadow: 0 14px 26px -12px rgba(25, 23, 28, 0.35); }
.lj-design .lj-swatch { right: -46px; bottom: auto; top: 16%; }
.lj-cursor { position: absolute; left: 112px; bottom: -2px; width: 26px; fill: #19171c; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }
.lj-stop.is-on .lj-cursor { animation: lj-cursor 2.6s ease-in-out infinite; }
@keyframes lj-cursor { 0%, 100% { transform: translate(40px, -150px); } 45%, 70% { transform: translate(0, 0); } 55% { transform: translate(0, 0) scale(0.85); } }
/* hareket aşaması: post canlanır, altında zaman çizelgesi */
.lj-motion { display: grid; justify-items: center; gap: 16px; }
.lj-tl { position: relative; width: 300px; padding: 10px 12px; border-radius: 12px; background: #19171c; display: grid; gap: 6px; }
.lj-tl__row { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; height: 12px; }
.lj-tl__row b { font: 600 9px/1 var(--display); color: rgba(255, 255, 255, 0.55); }
.lj-tl__row i { position: relative; height: 8px; margin-left: calc(var(--s) * 1%); width: calc((var(--e) - var(--s)) * 1%); border-radius: 3px; background: #ffb48c; }
.lj-tl__row:nth-child(2) i { background: #ff5a1f; } .lj-tl__row:nth-child(3) i { background: #7cf29c; } .lj-tl__row:nth-child(4) i { background: #f5ff63; }
.lj-tl__head { position: absolute; top: 4px; bottom: 4px; left: calc(12px + 52px); width: 2px; background: #fff; }
.lj-stop.is-on .lj-tl__head { animation: lj-head 3.2s linear infinite; }
@keyframes lj-head { from { transform: translateX(0); } to { transform: translateX(224px); } }
.lj-stop.is-on .lp--anim .lp__img { animation: lp-img 3.2s var(--ease) infinite; }
.lj-stop.is-on .lp--anim .lp__title span { animation: lp-title 3.2s var(--ease) infinite; }
.lj-stop.is-on .lp--anim .lp__title span + span { animation-name: lp-title2; }
.lj-stop.is-on .lp--anim .lp__sub { animation: lp-sub 3.2s ease infinite; }
.lj-stop.is-on .lp--anim .lp__btn { animation: lp-btn 3.2s infinite; }
.lj-stop.is-on .lp--anim .lp__sun { animation: lp-sun 3.2s var(--ease) infinite; }
@keyframes lp-img { 0% { transform: scale(1.25); opacity: 0; } 12% { opacity: 1; } 40%, 100% { transform: scale(1); opacity: 1; } }
@keyframes lp-sun { 0% { transform: translateY(40px); } 40%, 100% { transform: none; } }
@keyframes lp-title { 0%, 18% { clip-path: inset(0 100% 0 0); } 36%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes lp-title2 { 0%, 30% { clip-path: inset(0 100% 0 0); } 48%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes lp-sub { 0%, 42% { opacity: 0; transform: translateY(6px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes lp-btn { 0%, 54% { transform: scale(0); } 64% { transform: scale(1.15); } 72%, 100% { transform: scale(1); } }
.lj-art, .lj-move { position: relative; width: 280px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: visible; }
.lj-art img, .lj-move img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 70px -30px rgba(25, 23, 28, 0.5); }
.lj-swatch { position: absolute; right: -40px; bottom: 30px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px -12px rgba(25, 23, 28, 0.3); }
.lj-swatch i { width: 34px; height: 22px; border-radius: 6px; background: #ff5a1f; }
.lj-swatch i:nth-child(2) { background: #19171c; } .lj-swatch i:nth-child(3) { background: #ffb48c; } .lj-swatch i:nth-child(4) { background: #f5ff63; }
.lj-stop.is-on .lj-move { animation: jy-float 2.6s ease-in-out infinite; }
.lj-move { overflow: hidden; border-radius: 22px; }
.lj-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); animation: jy-shine 2.6s ease-in-out infinite; }
.lj-tag { position: absolute; left: -10px; top: 30px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px/1 var(--display); }
.lj-tag--o { left: auto; right: -10px; top: auto; bottom: 40px; background: var(--orange); }
.lj-phone { position: relative; width: 250px; padding: 12px 10px; border-radius: 36px; background: #0d0c10; box-shadow: 0 50px 80px -36px rgba(13, 12, 16, 0.7); }
.lj-phone img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.lj-phone__top, .dk-phone__top { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px; color: #fff; font: 600 12px/1 var(--display); }
.lj-phone__top b, .dk-phone__top b { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #ff9a62, #ff5a1f); }
.lj-phone__bar, .dk-phone__bar { height: 34px; padding: 10px 4px 0; color: #fff; font-size: 15px; letter-spacing: 6px; }
.lj-hearts { position: absolute; right: 10%; bottom: 60px; }
.lj-hearts i { position: absolute; font-style: normal; font-size: 24px; color: #ff3d7f; opacity: 0; animation: jy-like 2.2s ease-out infinite; }
.lj-hearts i:nth-child(2) { left: -22px; animation-delay: 0.6s; } .lj-hearts i:nth-child(3) { left: 16px; animation-delay: 1.2s; }
.lj-end { position: relative; display: grid; place-items: center; padding-top: 80px; min-height: 40vh; }
.lj-end .lj-dot { top: 40px; }
.lj-logo { width: min(560px, 80%); fill: transparent; stroke: #19171c; stroke-width: 3; stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 2s var(--ease), fill 0.8s 1.4s; }
.lj-end.is-on .lj-logo { stroke-dashoffset: 0; fill: #19171c; }

@media (max-width: 900px) {
  .lj-stop { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; padding: 50px 0; }
  .lj-stop.is-r .lj-stop__txt { order: 0; }
  .lj-stop__txt { position: relative; z-index: 1; padding: 14px 10px; background: #fff; text-align: center; opacity: 1; transform: none; }
  .lj-stop__txt h3, .lj-stop__txt p, .lj-stop__txt span { opacity: 0.3; transition: opacity 0.5s; }
  .lj-stop.is-on .lj-stop__txt h3, .lj-stop.is-on .lj-stop__txt p, .lj-stop.is-on .lj-stop__txt span { opacity: 1; }
  .lj-chip, .lj-guide { display: none; }
  .lj-design .lj-swatch { right: -18px; }
  .lj-stop__vis { height: 340px; }
}

/* Hakkımızda · bir fikrin yolculuğu */
.journey { position: relative; height: 520vh; }
.journey__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.journey__in { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; width: 100%; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); }
.journey__steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 6px; }
.journey__steps li { display: flex; gap: 18px; padding: 14px 0; opacity: 0.28; transition: opacity 0.4s; }
.journey__steps li > span { font: 700 15px/1.6 var(--display); color: var(--muted); }
.journey__steps h3 { font: 800 32px/1 var(--display); letter-spacing: -0.035em; }
.journey__steps p { max-height: 0; overflow: hidden; margin-top: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); transition: max-height 0.5s var(--ease), margin 0.5s var(--ease); }
.journey__steps li.is-on { opacity: 1; }
.journey__steps li.is-on > span { color: var(--orange); }
.journey__steps li.is-on p { max-height: 80px; margin-top: 10px; }
.journey__bar { height: 3px; margin-top: 26px; border-radius: 2px; background: var(--line); overflow: hidden; }
.journey__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--jp, 0)); background: linear-gradient(90deg, #ff9a62, #ff5a1f, #e2400c); }
.journey__stage { position: relative; display: grid; place-items: center; height: min(78vh, 720px); border-radius: 36px; background: radial-gradient(60% 55% at 50% 45%, rgba(255, 90, 31, calc(0.06 + var(--glow, 0) * 0.2)), transparent 70%), var(--gray); }
/* kıvılcım */
.jy-spark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 1; transition: opacity 0.5s, transform 0.6s var(--ease); }
.jy-spark i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ff9a62 45%, #ff5a1f 70%); box-shadow: 0 0 40px 14px rgba(255, 90, 31, 0.45), 0 0 120px 40px rgba(255, 154, 98, 0.25); animation: jy-pulse 1.6s ease-in-out infinite; }
@keyframes jy-pulse { 50% { transform: scale(1.35); box-shadow: 0 0 60px 22px rgba(255, 90, 31, 0.5), 0 0 160px 60px rgba(255, 154, 98, 0.3); } }
.journey[data-step="0"] .jy-phone { opacity: 0; transform: scale(0.2); }
.journey:not([data-step="0"]) .jy-spark { opacity: 0; transform: scale(3); }
/* telefon / kart */
.jy-phone { position: relative; width: min(330px, 70%); padding: 0; border-radius: 22px; background: transparent; transition: opacity 0.5s, transform 0.8s var(--ease-expo), padding 0.7s var(--ease-expo), background 0.5s, border-radius 0.7s, box-shadow 0.5s; }
.jy-card { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #fbf9f4; box-shadow: 0 0 0 2px rgba(25, 23, 28, 0.12); transition: box-shadow 0.5s, transform 0.8s var(--ease-expo); }
.jy-sketch { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #2c2a30; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.4s var(--ease), opacity 0.4s; }
.jy-sketch__cta { stroke: var(--orange); stroke-width: 10; }
.journey[data-step="1"] .jy-sketch { stroke-dashoffset: 0; }
.jy-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--ease-expo); }
.journey[data-step="2"] .jy-art, .journey[data-step="3"] .jy-art, .journey[data-step="4"] .jy-art { clip-path: inset(0 0 0 0); }
.journey[data-step="2"] .jy-sketch, .journey[data-step="3"] .jy-sketch, .journey[data-step="4"] .jy-sketch { stroke-dashoffset: 0; opacity: 0; }
.journey[data-step="2"] .jy-card { box-shadow: 0 40px 70px -30px rgba(25, 23, 28, 0.45); }
/* hareket */
.jy-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-120%); opacity: 0; }
.journey[data-step="3"] .jy-card { animation: jy-float 2.4s ease-in-out infinite; box-shadow: 0 50px 80px -30px rgba(25, 23, 28, 0.5); }
.journey[data-step="3"] .jy-shine { opacity: 1; animation: jy-shine 2.4s ease-in-out infinite; }
.journey[data-step="3"] .jy-art { animation: jy-zoom 2.4s ease-in-out infinite; }
@keyframes jy-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes jy-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes jy-zoom { 50% { transform: scale(1.06); } }
.jy-tag { position: absolute; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--display); opacity: 0; transform: scale(0.6); transition: opacity 0.35s, transform 0.6s var(--spring); }
.jy-tag--a { left: 12%; top: 22%; } .jy-tag--b { right: 12%; bottom: 24%; background: var(--orange); }
.journey[data-step="3"] .jy-tag { opacity: 1; transform: none; animation: jy-bob 2s ease-in-out infinite; }
.journey[data-step="3"] .jy-tag--b { animation-delay: -1s; }
@keyframes jy-bob { 50% { transform: translateY(-10px); } }
/* yayında: kartın etrafında telefon belirir */
.jy-phone__top, .jy-bar { display: flex; align-items: center; gap: 8px; height: 0; overflow: hidden; color: #fff; font: 600 13px/1 var(--display); opacity: 0; transition: height 0.6s var(--ease-expo), opacity 0.4s; }
.jy-phone__top b { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #ff9a62, #ff5a1f); }
.jy-phone__top em { margin-left: auto; font-style: normal; opacity: 0.7; }
.jy-bar { gap: 16px; font-size: 18px; }
.journey[data-step="4"] .jy-phone { padding: 14px 12px; border-radius: 40px; background: #0d0c10; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06), 0 60px 90px -36px rgba(13, 12, 16, 0.7); transform: translateY(-6px); }
.journey[data-step="4"] .jy-phone__top { height: 40px; opacity: 1; }
.journey[data-step="4"] .jy-bar { height: 40px; opacity: 1; }
.journey[data-step="4"] .jy-card { border-radius: 14px; }
.jy-likes { position: absolute; right: 10%; bottom: 60px; pointer-events: none; }
.jy-likes i { position: absolute; font-style: normal; font-size: 26px; color: #ff3d7f; opacity: 0; }
.journey[data-step="4"] .jy-likes i { animation: jy-like 2.2s ease-out infinite; }
.jy-likes i:nth-child(2) { animation-delay: 0.4s !important; left: -24px; } .jy-likes i:nth-child(3) { animation-delay: 0.8s !important; left: 14px; }
.jy-likes i:nth-child(4) { animation-delay: 1.2s !important; left: -10px; } .jy-likes i:nth-child(5) { animation-delay: 1.6s !important; left: 22px; }
@keyframes jy-like { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 15% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { opacity: 0; transform: translateY(-200px) scale(0.8) rotate(-15deg); } }

.about__faq { padding-top: 140px; scroll-margin-top: 20px; }
@media (max-width: 640px) { .about__faq { padding-top: 90px; } }
/* Hakkımızda · hikâyeni yaz ("ready to launch" sahnesi) */
.launch { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 140px var(--gutter); overflow: hidden; background: #0b0a0e; color: #fff; }
.launch__streaks { position: absolute; inset: 0; perspective: 600px; pointer-events: none; }
.launch__streaks i { position: absolute; top: calc(30% + var(--i) * 4%); height: 1px; width: 46%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28) 60%, transparent); opacity: calc(0.25 + var(--lp, 0) * 0.6); }
.launch__streaks i:nth-child(odd) { left: -4%; transform: rotate(calc((var(--i) - 5.5) * -1.6deg)); transform-origin: 100% 50%; animation: ln-streak-l 5s linear infinite; animation-delay: calc(var(--i) * -0.45s); }
.launch__streaks i:nth-child(even) { right: -4%; transform: rotate(calc((var(--i) - 5.5) * 1.6deg)); transform-origin: 0 50%; animation: ln-streak-r 5s linear infinite; animation-delay: calc(var(--i) * -0.45s); }
@keyframes ln-streak-l { from { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes ln-streak-r { from { clip-path: inset(0 0 0 100%); } 50% { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
.launch__cards { position: absolute; inset: 0; perspective: 900px; pointer-events: none; }
.ln-card { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.ln-card img { display: block; object-fit: cover; }
.ln-card--tile span { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 20px; background: linear-gradient(135deg, #ff9a62, #ff5a1f 55%, #e2400c); color: #fff; box-shadow: 0 20px 40px -14px rgba(255, 90, 31, 0.6); }
.ln-card--tile span svg { width: 40px; height: 40px; }
.ln-card--tile b { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #111; font-size: 15px; }
.ln-card--photo img { width: 86px; height: 86px; border-radius: 16px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.8); }
.ln-card--photo em { position: absolute; left: 60%; top: -10px; padding: 5px 9px; border-radius: 8px; background: rgba(30, 28, 36, 0.92); font: 600 11px/1 var(--display); font-style: normal; white-space: nowrap; }
.ln-card--pay { display: grid; gap: 4px; width: 128px; padding: 12px 12px 14px; border-radius: 16px; background: #ffb48c; color: #19171c; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); }
.ln-card--pay small { font: 600 10px/1 var(--display); opacity: 0.7; }
.ln-card--pay strong { font: 800 17px/1.05 var(--display); letter-spacing: -0.02em; }
.ln-card--pay img { position: absolute; right: -18px; top: -20px; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 3px #0b0a0e; }
.ln-card--av img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.ln-card--av i { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: #7cf29c; box-shadow: 0 0 0 3px #0b0a0e; }
.ln-card--icon img { width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.8); }
.ln-card--dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd0b0, #ff5a1f); box-shadow: 0 0 30px rgba(255, 90, 31, 0.6); }
.ln-card--spark span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #1d1b22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; }
.ln-card--spark i { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: #f5ff63; }
.ln-card--badge { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: #1d1b22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); text-align: center; }
.ln-card--badge b { font: 800 15px/1 var(--display); }
.ln-card--badge span { font: 600 8px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
.launch__body { position: relative; z-index: 2; max-width: 720px; text-align: center; opacity: var(--lt, 0); transform: translateY(calc((1 - var(--lt, 0)) * 30px)); }
.launch__eyebrow { font: 600 13px/1 var(--display); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.launch__line { margin-top: 14px; font: 700 clamp(24px, 3.04vw, 43.2px)/1.16 var(--display);   /* önceki boyutun %80'i; satır kırılımları aynı */ letter-spacing: -0.035em; }
.launch__sub { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.launch__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.launch__btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: linear-gradient(100deg, #ff9a62, #ff5a1f 55%, #e2400c); color: #fff; font: 600 15px/1 var(--display); box-shadow: 0 14px 30px -14px rgba(226, 64, 12, 0.8); transition: transform 0.4s var(--spring); }
.launch__btn:hover { transform: translateY(-2px) scale(1.03); }
.launch__btn i { font-style: normal; }
.launch__btn--ghost { background: #1d1b22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
@media (max-width: 640px) {
  .launch { padding: 120px 22px; }
  .ln-card { --s: 0.72; }
}

.tale__pick { display: inline-block; padding: 0 0.12em; border: 0; border-bottom: 0.07em dashed rgba(255, 255, 255, 0.55); background: none; color: transparent; font: inherit; letter-spacing: inherit; background-image: linear-gradient(100deg, #ffb27f, #ff5a1f 55%, #ff8a4f); -webkit-background-clip: text; background-clip: text; cursor: pointer; transition: transform 0.3s var(--spring); }
.tale__pick:hover { transform: translateY(-3px); }
.tale__pick.is-swap { animation: tale-swap 0.45s var(--ease-expo); }
@keyframes tale-swap { 0% { opacity: 0; transform: translateY(0.4em); } 100% { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .journey { height: 460vh; }
  .journey__in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .journey__text .pill { display: none; }
  .journey__steps { margin-top: 0; gap: 0; }
  .journey__steps li { display: none; padding: 0; }
  .journey__steps li.is-on { display: flex; }
  .journey__steps h3 { font-size: 26px; }
  .journey__bar { margin-top: 14px; }
  .journey__stage { height: 58vh; border-radius: 28px; }
  .jy-phone { width: min(260px, 64%); }
}
@media (max-width: 640px) {
  .jy-tag--a { left: 4%; } .jy-tag--b { right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .journey { height: auto; }
  .journey__pin { position: static; height: auto; padding: 60px 0; }
}

.about__cta { margin-top: 40px !important; }
.about__manifest { padding: 100px 0 160px; }
.about__manifest .manifest__text { max-width: none; font-size: 48px; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value { display: flex; flex-direction: column; min-height: 320px; padding: 30px 28px; border-radius: 28px; background: var(--gray); transition: background 0.3s, color 0.3s; }
.value__no { font: 800 44px/1 var(--display); letter-spacing: -0.04em; color: transparent; background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%); -webkit-background-clip: text; background-clip: text; }
.value h3 { margin-top: auto; font: 700 26px/1.08 var(--display); letter-spacing: -0.03em; }
.value p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.value:hover { background: var(--ink); color: #fff; }
.value:hover p { color: rgba(255, 255, 255, 0.65); }
.about__do { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.about__do .head { position: sticky; top: 120px; margin-bottom: 0; }
.grad-o { color: transparent; background: linear-gradient(100deg, #ff9a62 0%, #ff5a1f 52%, #e2400c 100%); -webkit-background-clip: text; background-clip: text; }
.about__cta2 { margin-top: 36px !important; }
.about__services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.about__services a { display: flex; align-items: center; gap: 22px; padding: 30px 6px; border-bottom: 1px solid var(--line); font: 700 clamp(24px, 2.6vw, 36px)/1.05 var(--display); letter-spacing: -0.035em; transition: padding 0.4s var(--ease), color 0.3s; }
.about__services li { position: relative; }
.about__services a span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--sc) 22%, #fff); color: var(--ink); font: 700 13px/1 var(--display); letter-spacing: 0; transition: background 0.3s, transform 0.4s var(--spring); }
.about__services a:hover span { background: var(--sc); transform: rotate(-8deg) scale(1.08); }
.about__services a i { margin-left: auto; font-style: normal; font-size: 0.7em; color: var(--orange); opacity: 0; transform: translate(-8px, 8px); transition: opacity 0.3s, transform 0.4s var(--spring); }
.about__services a:hover { padding-left: 18px; color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent 70%); }
.about__services a:hover i { opacity: 1; transform: none; }
.about__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; --cols: 4; }
.about__logos li { width: calc((100% - (var(--cols) - 1) * 12px) / var(--cols)); }   /* son satır ortalanır */
.about__logos li { display: grid; place-items: center; height: 130px; border-radius: 24px; background: var(--gray); transition: background 0.3s, transform 0.4s var(--spring); }
.about__logos li:hover { transform: translateY(-3px); }
.about__logos li:hover img { opacity: 1; }
/* ilk 3 satır görünür (masaüstünde 12, tablette 9, mobilde 8), kalanlar düğmeyle açılır */
.about__logos:not(.is-open) li.is-extra { display: none; }
.about__logos.is-open li.is-extra { animation: logo-in 0.5s var(--ease-expo) both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes logo-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.about__morebtn { background: var(--lilac); color: var(--ink); }
.about__morebtn:hover { background: var(--lavender-2); }
.about__more .about__morebtn span { background: #fff; color: var(--orange); }
.about__more { display: flex; justify-content: center; margin-top: 28px; }
.about__more .btn span { margin-left: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.8em; }
.about__logos img { width: calc(var(--w, 110px) * 1.2); height: calc(var(--h, 40px) * 1.2); max-width: 64%; max-height: 52%; object-fit: contain; opacity: 0.72; transition: opacity 0.3s; }   /* şeritteki eşit-alan ölçüsünün büyütülmüş hali */
@media (max-width: 900px) {
  .values { grid-template-columns: 1fr 1fr; }
  .about__do { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about__do .head { position: static; }
  .about__logos { --cols: 3; }
  .about__logos:not(.is-open) li:nth-child(n + 10) { display: none; }
  .about__manifest .manifest__text { font-size: 36px; }
}
@media (max-width: 640px) {
  .values { grid-template-columns: minmax(0, 1fr); }
  .value { min-height: 220px; }
  .about__logos { --cols: 2; }
  .about__logos:not(.is-open) li:nth-child(n + 9) { display: none; }
  .about__logos li { height: 100px; }
  .about__logos img { width: calc(var(--w, 110px) * 1.1); height: calc(var(--h, 40px) * 1.1); }
  .about__manifest { padding: 60px 0 100px; }
  .about__manifest .manifest__text { font-size: 26px; overflow-wrap: break-word; }
}

.faq { display: grid; gap: 10px; }
.faq details { background: var(--gray); border-radius: 24px; padding: 0 28px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font: 600 20px/1.25 var(--display); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 28px/1 var(--body); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; font-size: 16px; color: var(--ink-2); }

.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
/* İletişim başlığı: iki satır, sütuna sığacak boyut, harfler yapışmasın */
.page-head .contact__intro h1 { font-size: clamp(38px, 5vw, 80px); line-height: 0.98; letter-spacing: -0.025em; }
.page-head .contact__intro h1 span { display: block; white-space: nowrap; }
@media (max-width: 900px) { .page-head .contact__intro h1 { font-size: min(12.5vw, 64px); } }
.contact__list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; }
.contact__list li { display: grid; gap: 2px; font: 600 18px/1.3 var(--display); }
.contact__list span { font: 400 14px/1.3 var(--body); color: var(--muted); }
.contact__card { background: var(--gray); border-radius: var(--r); padding: 40px; }
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field legend { font: 600 15px/1.2 var(--display); padding: 0; }
.field legend { margin-bottom: 10px; }
.field input, .field textarea { width: 100%; padding: 13px 16px; border-radius: 16px; border: 1px solid transparent; background: #fff; font: 400 16px/1.4 var(--body); color: var(--ink); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field.has-error input, .field.has-error textarea { border-color: #e5484d; }
.field em { font-style: normal; font-size: 13px; color: #d13438; }
.form__error--block { padding: 12px 16px; border-radius: 12px; background: #fde8e8; color: #b42318; font-size: 14px; }
.form__note { font-size: 13px; color: var(--muted); text-align: center; }
.hp { position: absolute !important; left: -9999px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt { position: relative; }
.pill-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pill-opt span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; font: 600 14px/1 var(--display); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.pill-opt input:checked + span { background: var(--ink); color: #fff; }
.pill-opt input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.success { text-align: center; padding: 40px 0; display: grid; justify-items: center; gap: 12px; }
.success__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); margin-bottom: 8px; }
.success h2 { font-size: 36px; letter-spacing: -0.04em; }
.success p { color: var(--ink-2); margin-bottom: 16px; }
.error-page { min-height: 50vh; justify-content: center; }
.center { display: flex; justify-content: center; margin-top: 48px; }

/* -------------------------------------------------------------------------
   Geniş ekran kademeleri (Jitter ölçüleri): 1441–1919px ve 1920px+
   Header öğeleri sabit boyutta kalır, yalnızca içerik alanıyla birlikte genişler.
   ------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  :root { --wrap: 1180px; }
  .hero { padding-top: 73px; padding-bottom: 310px; }
  .hero__title { margin-top: 40px; font-size: 115px; line-height: 103.5px; letter-spacing: -3.6px; }
  .hero__cta { margin-top: 50px; }
  .trust { margin-top: 101px; }
  .trust__logos { margin-top: 39px; }
  /* Geniş kademede logolar Jitter'deki gibi ~%14 büyür (35 → 40px) */
  .trust__mark img.is-sized { zoom: 1.143; }
  .trust__mark img:not(.is-sized) { height: 32px; }
  .showroll__item { width: 510px; }
  .card__stage { height: 498px; }
  .card__poster { width: 275px; }
  .manifest__text { max-width: 820px; font-size: 52px; }
  .reel__frame { height: 737px; }
  .reel__screen { width: 790px; }
  .reel__comp strong { font-size: 88px; }
  .head h2 { font-size: 90px; line-height: 85.5px; }
  .head p { font-size: 20px; line-height: 30px; }
  .head--center h2 { max-width: 800px; }
  .head--center p { max-width: 600px; }
  .features { max-width: 980px; margin: 0 auto; }
  .wrap--details { max-width: calc(1060px + var(--gutter) * 2); }
  .quote blockquote { max-width: 920px; }
  .quote p { font-size: 90px; }
  .slide { width: 510px; min-height: 660px; }
  .loved h2 { font-size: 48px; }
  .footer__cta h2 { font-size: 115px; line-height: 0.95; }
  .page-head h1 { font-size: 115px; }
}

@media (min-width: 1920px) {
  :root { --wrap: 1320px; }
  .hero { padding-top: 72px; padding-bottom: 350px; }
  .hero__title { margin-top: 49px; font-size: 140px; line-height: 126px; letter-spacing: -4.5px; }
  .hero__cta { margin-top: 60px; }
  .card__stage { height: 548px; }
  .showroll__item { width: 560px; }
  .card__poster { width: 302px; }
  .manifest__text { max-width: 920px; font-size: 58px; }
  .reel__frame { height: 825px; }
  .reel__screen { width: 884px; }
  .head h2 { font-size: 96px; line-height: 91.2px; }
  .features { max-width: 1100px; }
  .wrap--details { max-width: calc(1186px + var(--gutter) * 2); }
  .quote blockquote { max-width: 1000px; }
  .quote p { font-size: 100px; }
  .slide { width: 560px; min-height: 720px; }
  .footer__cta h2 { font-size: 140px; }
  .page-head h1 { font-size: 140px; }
}

/* -------------------------------------------------------------------------
   Kart animasyonları (.motion) — --c ana renk, --a vurgu rengi
   ------------------------------------------------------------------------- */
/* Hizmet kartı animasyonları: her biri hizmetin kendisini anlatır; renk --c (zemin), --a (vurgu) */
.sm { position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(80% 70% at 70% 15%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%), var(--c); container-type: size; font-family: var(--display); }
.sm i, .sm b { display: block; font-style: normal; }
/* 1 · Sosyal medya: içerik takvimi */
.sm-cal { position: relative; width: 86%; padding: 4cqmin; border-radius: 4cqmin; background: #fff; color: #19171c; box-shadow: 0 5cqmin 12cqmin rgba(0, 0, 0, 0.35); }
.sm-cal__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3cqmin; }
.sm-cal__head b { font: 800 4.6cqmin/1 var(--display); letter-spacing: -0.03em; }
.sm-cal__head span { font: 600 3cqmin/1 var(--display); color: #8a888f; }
.sm-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.6cqmin; margin-bottom: 1.6cqmin; }
.sm-cal__days span { font: 700 2.4cqmin/1 var(--display); color: #8a888f; text-align: center; }
.sm-cal__grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 1.6cqmin; }
.sm-cal__cell { aspect-ratio: 1; border-radius: 1.6cqmin; background: #f2f1f3; }
.sm-cal__post { position: absolute; z-index: 1; left: calc(var(--col) * (100% + 1.6cqmin) / 7); top: calc(var(--row) * (100% + 1.6cqmin) / 2); width: calc((100% - 6 * 1.6cqmin) / 7); aspect-ratio: 1; border-radius: 1.6cqmin; background: linear-gradient(140deg, var(--a), color-mix(in srgb, var(--a) 45%, var(--c))); animation: sm-drop 8s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; animation-delay: calc(var(--k) * 0.45s); opacity: 0; }
.sm-cal__post--r { background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 50%, var(--a))); }
.sm-cal__post--s { background: linear-gradient(140deg, #ff3d7f, var(--a)); }
.sm-cal__post u { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.6cqmin; text-decoration: none; }
.sm-cal__post em { position: absolute; right: -1cqmin; bottom: -1cqmin; display: grid; place-items: center; width: 4cqmin; height: 4cqmin; border-radius: 50%; background: #2bbf8a; box-shadow: 0 0 0 0.6cqmin #fff; transform: scale(0); animation: sm-check 8s ease infinite; animation-delay: calc(var(--k) * 0.45s); }
.sm-cal__post em::after { content: '✓'; color: #fff; font: 800 2.4cqmin/1 var(--display); }
@keyframes sm-drop { 0% { opacity: 0; transform: translateY(-14cqmin) scale(0.6) rotate(-12deg); } 8%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes sm-check { 0%, 30% { transform: scale(0); } 36% { transform: scale(1.3); } 40%, 82% { transform: scale(1); } 90%, 100% { transform: scale(0); } }
.sm-plat { position: absolute; left: 6%; top: 10%; display: flex; }
.sm-plat span { display: grid; place-items: center; width: 9cqmin; height: 9cqmin; margin-left: -2cqmin; border-radius: 50%; background: #fff; color: var(--c); font: 800 3cqmin/1 var(--display); box-shadow: 0 0 0 0.8cqmin var(--c); animation: sm-bob 3s ease-in-out infinite; }
.sm-plat span:first-child { margin-left: 0; } .sm-plat span:nth-child(2) { animation-delay: 0.3s; background: var(--a); color: #fff; } .sm-plat span:nth-child(3) { animation-delay: 0.6s; }
@keyframes sm-bob { 50% { transform: translateY(-1.6cqmin); } }
.sm-pill { position: absolute; display: flex; align-items: center; gap: 1.2cqmin; padding: 1.8cqmin 3cqmin; border-radius: 99px; background: #fff; color: #111; font-weight: 700; font-size: 4cqmin; white-space: nowrap; box-shadow: 0 2cqmin 5cqmin rgba(0, 0, 0, 0.25); opacity: 0; }
.sm-pill--a { right: 6%; bottom: 9%; background: var(--a); color: #fff; animation: sm-pop 4s var(--ease-expo, ease) infinite 1.4s; }
@keyframes sm-pop { 0%, 8% { opacity: 0; transform: translateY(3cqmin) scale(0.85); } 16%, 60% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-3cqmin); } }
/* 2 · Motion design: kompozisyon penceresi + eğri + zaman çizelgesi */
.sm-comp { position: absolute; left: 7%; right: 7%; top: 7%; height: 52%; border-radius: 3cqmin; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 0.4cqmin rgba(255, 255, 255, 0.1); overflow: hidden; }
.sm-comp__bar { display: flex; align-items: center; gap: 1.6cqmin; height: 7cqmin; padding: 0 3cqmin; background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.75); font: 600 2.8cqmin/1 var(--display); }
.sm-comp__bar i { width: 2cqmin; height: 2cqmin; border-radius: 50%; background: #ff5f57; }
.sm-comp__bar span { margin-left: auto; font-variant-numeric: tabular-nums; }
.sm-comp__f { display: inline !important; counter-reset: tc var(--tc); animation: sm-tc 3.6s steps(10) infinite; }
.sm-comp__f::after { content: counter(tc); }
.sm-stage { position: absolute; left: 6%; right: 6%; top: 7cqmin; bottom: 0; }
.sm-path { position: absolute; left: 4%; right: 4%; top: 55%; height: 0; border-top: 0.5cqmin dashed color-mix(in srgb, var(--a) 60%, transparent); }
.sm-shape { position: absolute; left: 0; top: 55%; width: 15cqmin; height: 15cqmin; margin-top: -7.5cqmin; background: var(--a); border-radius: 2cqmin; animation: sm-shape 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; box-shadow: 0 0 6cqmin color-mix(in srgb, var(--a) 60%, transparent); }
.sm-shape--ghost { opacity: calc(0.42 - var(--g) * 0.11); box-shadow: none; animation-delay: calc(var(--g) * -0.09s); }
@keyframes sm-shape { 0% { left: 0; border-radius: 2cqmin; transform: rotate(0) scale(1); background: var(--a); } 45% { left: calc(50% - 7.5cqmin); border-radius: 50%; transform: rotate(180deg) scale(1.35) translateY(-6cqmin); background: #fff; } 90%, 100% { left: calc(100% - 15cqmin); border-radius: 2cqmin 50% 2cqmin 50%; transform: rotate(360deg) scale(1); background: var(--a); } }
.sm-ease { position: absolute; right: 7%; top: 47%; width: 24cqmin; padding: 2.4cqmin; border-radius: 3cqmin; background: #fff; box-shadow: 0 3cqmin 8cqmin rgba(0, 0, 0, 0.35); }
.sm-ease b { display: block; margin-bottom: 1.4cqmin; font: 700 2.6cqmin/1 var(--display); color: #19171c; }
.sm-ease svg { display: block; width: 100%; overflow: visible; fill: none; stroke-linecap: round; }
.sm-ease__grid { stroke: #e2e0e7; stroke-width: 1.2; }
.sm-ease__curve { stroke: var(--c); stroke-width: 2.6; }
.sm-ease__hl { stroke: #b6b3bf; stroke-width: 1; }
.sm-ease__h { fill: var(--a); }
.sm-tl { position: absolute; left: 7%; right: 7%; bottom: 7%; display: grid; gap: 2cqmin; padding: 3cqmin; border-radius: 3cqmin; background: rgba(0, 0, 0, 0.35); }
.sm-tl__row { position: relative; height: 3.4cqmin; margin-left: 11cqmin; border-radius: 1cqmin; background: rgba(255, 255, 255, 0.08); }
.sm-tl__row u { position: absolute; right: 100%; margin-right: 2cqmin; top: 50%; transform: translateY(-50%); text-decoration: none; color: rgba(255, 255, 255, 0.6); font: 600 2.4cqmin/1 var(--display); }
.sm-tl__row i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 1%); width: calc((var(--e) - var(--s)) * 1%); border-radius: 1cqmin; background: color-mix(in srgb, var(--a) 70%, transparent); }
.sm-tl__row:nth-child(2) i { background: rgba(255, 255, 255, 0.55); } .sm-tl__row:nth-child(3) i { background: color-mix(in srgb, var(--a) 40%, #fff); }
.sm-tl__row b { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 2.4cqmin; height: 2.4cqmin; margin: -1.2cqmin 0 0 -1.2cqmin; background: #fff; transform: rotate(45deg); }
.sm-tl__head { position: absolute; top: 1.4cqmin; bottom: 1.4cqmin; left: 14cqmin; width: 0.6cqmin; background: #fff; box-shadow: 0 0 2cqmin #fff; animation: sm-head 3.6s linear infinite; }
@keyframes sm-head { from { transform: translateX(0); } to { transform: translateX(calc(86cqw - 20cqmin)); } }
/* 3 · Web & e-ticaret: mağaza, sepete ekleme, mobil görünüm, hız skoru */
.sm-browser { position: absolute; left: 7%; top: 12%; width: 76%; border-radius: 3cqmin; background: #fff; box-shadow: 0 4cqmin 10cqmin rgba(0, 0, 0, 0.3); }
.sm-browser__bar { display: flex; align-items: center; gap: 1.2cqmin; height: 6.4cqmin; padding: 0 2.4cqmin; border-radius: 3cqmin 3cqmin 0 0; background: #ecebef; }
.sm-browser__bar i { width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; background: #c9c7cf; }
.sm-browser__bar span { flex: 1; margin-left: 2cqmin; padding: 0.8cqmin 2cqmin; border-radius: 99px; background: #fff; color: #8a888f; font: 600 2.2cqmin/1 var(--display); }
.sm-shop { display: grid; gap: 2.4cqmin; padding: 2.6cqmin; }
.sm-shop__nav { display: flex; align-items: center; gap: 2cqmin; }
.sm-shop__nav b { width: 9cqmin; height: 2.6cqmin; border-radius: 1cqmin; background: var(--c); }
.sm-shop__nav i { width: 5cqmin; height: 1.6cqmin; border-radius: 1cqmin; background: #e2e0e7; }
.sm-cart { position: relative; margin-left: auto; font-size: 3.6cqmin; text-decoration: none; animation: sm-cart 6s infinite; }
.sm-cart em { position: absolute; right: -1.8cqmin; top: -1.6cqmin; display: grid; place-items: center; width: 3.6cqmin; height: 3.6cqmin; border-radius: 50%; background: var(--c); color: #fff; font: 800 2.2cqmin/1 var(--display); font-style: normal; transform: scale(0); animation: sm-badge 6s infinite; }
@keyframes sm-cart { 0%, 44% { transform: scale(1); } 49% { transform: scale(1.35) rotate(-10deg); } 55%, 100% { transform: scale(1); } }
@keyframes sm-badge { 0%, 46% { transform: scale(0); } 52% { transform: scale(1.3); } 57%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.sm-shop__hero { position: relative; display: flex; align-items: center; height: 15cqmin; padding: 0 3cqmin; border-radius: 2cqmin; overflow: hidden; background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #ff9a62)); }
.sm-shop__hero span { position: relative; z-index: 1; display: grid; gap: 1.2cqmin; }
.sm-shop__hero span b { width: 22cqmin; height: 2.4cqmin; border-radius: 1cqmin; background: #fff; }
.sm-shop__hero span b + b { width: 15cqmin; opacity: 0.7; }
.sm-shop__hero span i { justify-self: start; padding: 0.9cqmin 2cqmin; border-radius: 99px; background: #fff; color: var(--c); font: 700 2cqmin/1 var(--display); font-style: normal; }
.sm-shop__blob { position: absolute; right: -4cqmin; top: -4cqmin; width: 22cqmin; height: 22cqmin; border-radius: 50%; background: rgba(255, 255, 255, 0.25); animation: sm-bob 4s ease-in-out infinite; }
.sm-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqmin; }
.sm-prod { position: relative; display: grid; gap: 1cqmin; padding: 1.4cqmin; border-radius: 2cqmin; background: #f6f5f8; }
.sm-prod__img { height: 11cqmin; border-radius: 1.4cqmin; background: radial-gradient(circle at 50% 60%, var(--pc) 0 34%, color-mix(in srgb, var(--pc) 30%, #fff) 35%); }
.sm-prod b { width: 80%; height: 1.4cqmin; border-radius: 1cqmin; background: #dcdae1; }
.sm-prod span { font: 800 2.4cqmin/1 var(--display); color: #19171c; }
.sm-prod u { position: absolute; right: 1.2cqmin; bottom: 1.2cqmin; display: grid; place-items: center; width: 4cqmin; height: 4cqmin; border-radius: 50%; background: #19171c; color: #fff; font: 700 2.8cqmin/1 var(--display); text-decoration: none; }
.sm-prod u.is-hit { animation: sm-hit 6s infinite; }
@keyframes sm-hit { 0%, 30% { transform: scale(1); background: #19171c; } 33% { transform: scale(0.75); } 37%, 92% { transform: scale(1); background: var(--c); } 100% { background: #19171c; } }
.sm-fly { position: absolute; left: 50%; top: 82%; width: 5cqmin; height: 5cqmin; border-radius: 50%; background: #ff9a62; opacity: 0; animation: sm-fly 6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes sm-fly { 0%, 33% { opacity: 0; transform: none; } 35% { opacity: 1; } 47% { opacity: 1; transform: translate(31cqmin, -64cqmin) scale(0.5); } 49%, 100% { opacity: 0; transform: translate(31cqmin, -64cqmin) scale(0.2); } }
.sm-cursor { position: absolute; width: 6cqmin; fill: #111; stroke: #fff; stroke-width: 1.5; left: 54%; top: 80%; animation: sm-cursor 6s ease-in-out infinite; filter: drop-shadow(0 1cqmin 1cqmin rgba(0, 0, 0, 0.3)); }
@keyframes sm-cursor { 0%, 10% { transform: translate(18cqmin, 14cqmin); } 28%, 31% { transform: translate(0, 0); } 33% { transform: scale(0.8); } 36%, 70% { transform: translate(0, 0); } 90%, 100% { transform: translate(18cqmin, 14cqmin); } }
.sm-mob { position: absolute; right: 6%; bottom: 8%; display: grid; gap: 1.2cqmin; align-content: start; width: 21cqmin; height: 40cqmin; padding: 3cqmin 1.8cqmin; border-radius: 4cqmin; background: #fff; box-shadow: 0 0 0 1cqmin #19171c, 0 4cqmin 10cqmin rgba(0, 0, 0, 0.35); animation: sm-bob 5s ease-in-out infinite; }
.sm-mob i { height: 12cqmin; border-radius: 1.4cqmin; background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #ff9a62)); }
.sm-mob b { width: 80%; height: 1.6cqmin; border-radius: 1cqmin; background: #19171c; }
.sm-mob span { height: 7cqmin; border-radius: 1.4cqmin; background: #f2f1f3; }
.sm-mob u { height: 3.4cqmin; border-radius: 99px; background: var(--c); }
.sm-speed { position: absolute; left: 9%; top: 63%; display: grid; place-items: center; width: 17cqmin; height: 17cqmin; border-radius: 50%; background: #fff; box-shadow: 0 3cqmin 8cqmin rgba(0, 0, 0, 0.3); }
.sm-speed svg { position: absolute; inset: 1.4cqmin; width: calc(100% - 2.8cqmin); height: calc(100% - 2.8cqmin); transform: rotate(-90deg); fill: none; stroke-width: 3; }
.sm-speed circle { stroke: #ececf0; }
.sm-speed__v { stroke: #2bbf8a !important; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: sm-speed 6s ease-out infinite; }
@keyframes sm-speed { 0%, 5% { stroke-dashoffset: 100; } 30%, 92% { stroke-dashoffset: 2; } 100% { stroke-dashoffset: 100; } }
.sm-speed b { font: 800 5cqmin/1 var(--display); color: #19171c; margin-top: -1.6cqmin; }
.sm-speed em { position: absolute; bottom: 3.4cqmin; font: 600 1.8cqmin/1 var(--display); font-style: normal; color: #8a888f; }
.sm-toast { position: absolute; left: 7%; bottom: 9%; display: flex; align-items: center; gap: 1.4cqmin; padding: 2cqmin 3cqmin 2cqmin 2cqmin; border-radius: 99px; background: #19171c; color: #fff; font: 700 3.4cqmin/1 var(--display); white-space: nowrap; box-shadow: 0 3cqmin 7cqmin rgba(0, 0, 0, 0.35); opacity: 0; animation: sm-toast 6s var(--ease-expo, ease) infinite; }
.sm-toast i { display: grid !important; place-items: center; width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; background: #2bbf8a; font-size: 2.6cqmin; }
@keyframes sm-toast { 0%, 55% { opacity: 0; transform: translateY(4cqmin); } 61%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-2cqmin); } }
/* Özel yazılım: kod editörü + canlı panel */
.sm-code { position: absolute; left: 7%; top: 9%; width: 72%; border-radius: 3cqmin; background: #0f1414; box-shadow: 0 5cqmin 12cqmin rgba(0, 0, 0, 0.4); overflow: hidden; font: 600 3cqmin/1.55 ui-monospace, 'SF Mono', Menlo, monospace; }
.sm-code__bar { display: flex; align-items: center; gap: 1.2cqmin; height: 6.4cqmin; padding: 0 2.4cqmin; background: #182020; }
.sm-code__bar i { width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; background: #3a4545; } .sm-code__bar i:first-child { background: #ff5f57; }
.sm-code__bar b { margin-left: 2cqmin; color: rgba(255, 255, 255, 0.6); font: 600 2.4cqmin/1 var(--display); }
.sm-code__body { padding: 2.4cqmin 2.4cqmin 1cqmin; }
.sm-code__ln { display: flex; gap: 2.4cqmin; white-space: pre; }
.sm-code__ln u { width: 2.6cqmin; text-align: right; text-decoration: none; color: rgba(255, 255, 255, 0.25); }
.sm-code__ln span { display: inline-block; overflow: hidden; clip-path: inset(0 100% 0 0); animation: sm-type 7s steps(24) infinite; animation-delay: calc(var(--k) * 0.55s); }
@keyframes sm-type { 0% { clip-path: inset(0 100% 0 0); } 8%, 88% { clip-path: inset(0 0 0 0); } 94%, 100% { clip-path: inset(0 100% 0 0); } }
.sm-code em { font-style: normal; } .c-k { color: #ff9a62; } .c-f { color: var(--a); } .c-p { color: #e8ecec; } .c-n { color: #ffb27f; } .c-s { color: #7fd6ff; }
.sm-code__term { margin: 0 2.4cqmin 2.4cqmin; padding: 1.6cqmin 2cqmin; border-radius: 1.6cqmin; background: #182020; color: #e8ecec; font-size: 2.6cqmin; }
.sm-code__term b { display: inline !important; color: var(--a); }
.sm-code__ok { margin-left: 1.4cqmin; color: var(--a); opacity: 0; animation: sm-ok 7s infinite; }
@keyframes sm-ok { 0%, 44% { opacity: 0; } 48%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.sm-dash { position: absolute; right: 6%; bottom: 8%; display: grid; gap: 2cqmin; width: 42%; padding: 3cqmin; border-radius: 3cqmin; background: #fff; color: #19171c; box-shadow: 0 5cqmin 12cqmin rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(4cqmin) scale(0.94); animation: sm-dash 7s var(--ease-expo, ease) infinite; }
@keyframes sm-dash { 0%, 48% { opacity: 0; transform: translateY(4cqmin) scale(0.94); } 56%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sm-dash__kpi { display: flex; justify-content: space-between; align-items: baseline; }
.sm-dash__kpi span { font: 600 2.6cqmin/1 var(--display); color: #8a888f; } .sm-dash__kpi b { font: 800 5.4cqmin/1 var(--display); letter-spacing: -0.03em; color: var(--c); }
.sm-dash__bars { display: flex; align-items: flex-end; gap: 1.2cqmin; height: 12cqmin; }
.sm-dash__bars i { flex: 1; height: var(--h); border-radius: 0.8cqmin 0.8cqmin 0 0; background: color-mix(in srgb, var(--c) 30%, #fff); transform-origin: bottom; animation: sm-dbar 7s var(--ease-expo, ease) infinite; animation-delay: calc(var(--i) * 0.06s); }
.sm-dash__bars i:last-child { background: var(--a); }
@keyframes sm-dbar { 0%, 52% { transform: scaleY(0); } 62%, 90% { transform: none; } 100% { transform: scaleY(0); } }
.sm-dash__row { display: flex; align-items: center; gap: 1.6cqmin; }
.sm-dash__row i { width: 4cqmin; height: 4cqmin; border-radius: 1cqmin; background: #f2f1f3; } .sm-dash__row span { flex: 1; height: 1.6cqmin; border-radius: 1cqmin; background: #eceaf0; }
.sm-dash__row em { display: grid; place-items: center; width: 3.6cqmin; height: 3.6cqmin; border-radius: 50%; background: var(--a); color: var(--c); font: 800 2.2cqmin/1 var(--display); font-style: normal; }
.feature__media .sm-code { width: 60%; top: 8%; } .feature__media .sm-dash { width: 34%; right: 5%; bottom: 10%; }
/* 4 · Marka & kimlik */
.sm-brand { position: relative; width: 70cqmin; height: 70cqmin; display: grid; place-items: center; }
.sm-guide { position: absolute; border: 0.4cqmin solid color-mix(in srgb, var(--a) 55%, transparent); border-radius: 50%; animation: sm-guide 6s ease-in-out infinite; }
.sm-guide--1 { inset: 8%; } .sm-guide--2 { inset: 26%; animation-delay: 0.2s; }
.sm-guide--h { left: -10%; right: -10%; top: 50%; height: 0; border-width: 0.4cqmin 0 0; border-radius: 0; border-style: dashed; animation-delay: 0.35s; }
.sm-guide--v { top: -10%; bottom: -10%; left: 50%; width: 0; border-width: 0 0 0 0.4cqmin; border-radius: 0; border-style: dashed; animation-delay: 0.45s; }
@keyframes sm-guide { 0% { opacity: 0; transform: scale(0.7); } 12%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0.25; } }
.sm-mark { position: relative; width: 52%; fill: none; stroke: var(--a); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: sm-mark 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes sm-mark { 0%, 12% { stroke-dashoffset: 220; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } }
.sm-swatches { position: absolute; bottom: -6%; display: flex; gap: 2cqmin; }
.sm-swatches i { width: 8cqmin; height: 8cqmin; border-radius: 2cqmin; background: var(--a); box-shadow: 0 0 0 0.6cqmin rgba(255, 255, 255, 0.85); transform: translateY(6cqmin); opacity: 0; animation: sm-sw 6s var(--ease-expo, ease) infinite; }
.sm-swatches i:nth-child(2) { background: var(--c); filter: brightness(1.6); animation-delay: 0.12s; } .sm-swatches i:nth-child(3) { background: #fff; animation-delay: 0.24s; } .sm-swatches i:nth-child(4) { background: #111; animation-delay: 0.36s; }
@keyframes sm-sw { 0%, 45% { transform: translateY(6cqmin); opacity: 0; } 55%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.sm-type { position: absolute; right: -4%; top: 2%; font: 800 12cqmin/1 var(--display); color: #fff; letter-spacing: -0.04em; opacity: 0; animation: sm-sw 6s var(--ease-expo, ease) infinite 0.5s; }
/* 5 · Performans pazarlama */
.sm-chart { position: relative; width: 78%; height: 62%; }
.sm-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3%; padding-top: 10%; }
.sm-bars i { flex: 1; height: var(--h); border-radius: 1.6cqmin 1.6cqmin 0 0; background: color-mix(in srgb, var(--a) 35%, transparent); transform-origin: bottom; animation: sm-bar 5s var(--ease-expo, ease) infinite; animation-delay: calc(var(--i) * 0.08s); }
.sm-bars i:last-child { background: var(--a); }
@keyframes sm-bar { 0% { transform: scaleY(0); } 20%, 88% { transform: none; } 100% { transform: scaleY(0); } }
.sm-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.sm-line path { stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; animation: sm-line 5s ease-in-out infinite; filter: drop-shadow(0 0 1.5cqmin rgba(255, 255, 255, 0.5)); }
@keyframes sm-line { 0%, 15% { stroke-dashoffset: 100; } 50%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.sm-roas, .sm-up { position: absolute; padding: 1.8cqmin 3cqmin; border-radius: 99px; font-weight: 700; font-size: 4cqmin; white-space: nowrap; opacity: 0; animation: sm-pop 5s var(--ease-expo, ease) infinite 1.8s; }
.sm-roas { left: 0; top: -6%; background: #fff; color: #111; } .sm-roas b { display: inline; color: var(--c); }
.sm-up { right: -4%; top: -14%; background: var(--a); color: var(--c); animation-delay: 2.3s; }
/* 6 · Prodüksiyon: tek sahne, üç format (16:9 → 9:16 → 1:1) */
.sm-fmt { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 10cqmin; }
.sm-fmt__frame { position: relative; width: 84cqmin; height: 47.25cqmin; border-radius: 3cqmin; overflow: hidden; background: #000; box-shadow: 0 0 0 0.8cqmin #fff, 0 5cqmin 12cqmin rgba(0, 0, 0, 0.4); animation: sm-fmt 9s cubic-bezier(0.7, 0, 0.25, 1) infinite; }
@keyframes sm-fmt {
  0%, 26% { width: 84cqmin; height: 47.25cqmin; border-radius: 3cqmin; }
  33%, 59% { width: 54cqmin; height: 96cqmin; border-radius: 4cqmin; }
  66%, 92% { width: 74cqmin; height: 74cqmin; border-radius: 3cqmin; }
  100% { width: 84cqmin; height: 47.25cqmin; border-radius: 3cqmin; }
}
.sm-fmt__scene { position: absolute; left: 50%; top: 50%; width: 100cqmin; height: 100cqmin; margin: -50cqmin; background: linear-gradient(#ffd2b3 0%, #ff9a62 46%, color-mix(in srgb, var(--c) 40%, #ff5a1f) 100%); animation: sm-pan 9s ease-in-out infinite; }
@keyframes sm-pan { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.08); } }
.sm-fs__sun { position: absolute; left: 50%; top: 30%; width: 22cqmin; height: 22cqmin; margin-left: -11cqmin; border-radius: 50%; background: #fff6c9; box-shadow: 0 0 10cqmin #fff2a8; animation: sm-sun 9s ease-in-out infinite; }
@keyframes sm-sun { 50% { transform: translateY(4cqmin); } }
.sm-fs__hill { position: absolute; left: -20%; right: -20%; border-radius: 50% 50% 0 0; }
.sm-fs__hill--b { top: 52%; bottom: 0; background: color-mix(in srgb, #ff5a1f 55%, #7a3b8f); opacity: 0.9; transform: translateX(-12%); }
.sm-fs__hill--f { top: 62%; bottom: 0; background: color-mix(in srgb, var(--c) 45%, #19171c); transform: translateX(10%); }
.sm-fs__subj { position: absolute; left: 50%; top: 47%; width: 9cqmin; height: 22cqmin; margin-left: -4.5cqmin; border-radius: 4.5cqmin 4.5cqmin 1cqmin 1cqmin; background: #19171c; animation: sm-walk 1.2s ease-in-out infinite; }
.sm-fs__subj b { position: absolute; left: 50%; top: -7cqmin; width: 7cqmin; height: 7cqmin; margin-left: -3.5cqmin; border-radius: 50%; background: #19171c; }
@keyframes sm-walk { 50% { transform: translateY(-0.8cqmin); } }
.sm-fs__bird { position: absolute; left: 20%; top: 18%; width: 5cqmin; height: 2cqmin; border-top: 0.6cqmin solid #19171c; border-radius: 50% 50% 0 0; animation: sm-bird 9s linear infinite; }
@keyframes sm-bird { from { transform: translateX(-30cqmin); } to { transform: translateX(80cqmin); } }
/* platform arayüzleri: yalnızca kendi formatında görünür */
.sm-ui { position: absolute; inset: 0; color: #fff; font: 700 2.6cqmin/1 var(--display); opacity: 0; animation: sm-ui 9s infinite; }
.sm-ui--reel { animation-delay: 3s; } .sm-ui--post { animation-delay: 6s; }
@keyframes sm-ui { 0%, 2% { opacity: 0; } 6%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
.sm-ui__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 11cqmin; height: 8cqmin; margin: -4cqmin -5.5cqmin; border-radius: 2cqmin; background: #ff0033; font-size: 3.4cqmin; font-style: normal; animation: sm-ytplay 9s infinite; }
@keyframes sm-ytplay { 0%, 8% { opacity: 1; transform: scale(1); } 12%, 100% { opacity: 0; transform: scale(1.6); } }
.sm-ui__bar { position: absolute; left: 2cqmin; right: 2cqmin; bottom: 6cqmin; height: 0.8cqmin; border-radius: 1cqmin; background: rgba(255, 255, 255, 0.35); }
.sm-ui__bar i { display: block; height: 100%; width: 46%; border-radius: inherit; background: #ff0033; }
.sm-ui__ctl { position: absolute; left: 2cqmin; right: 2cqmin; bottom: 1.8cqmin; display: flex; align-items: center; gap: 1.6cqmin; font-size: 2.4cqmin; }
.sm-ui__ctl em { font-style: normal; font-weight: 600; opacity: 0.85; } .sm-ui__ctl u { margin-left: auto; text-decoration: none; }
.sm-ui__side { position: absolute; right: 2.4cqmin; bottom: 14cqmin; display: grid; gap: 3cqmin; font-size: 4.4cqmin; }
.sm-ui__side i, .sm-ui__foot i { font-style: normal; }
.sm-ui__side i:first-child { color: #ff3d7f; animation: sm-like 1.5s ease-in-out infinite; }
@keyframes sm-like { 50% { transform: scale(1.3); } }
.sm-ui__user { position: absolute; left: 2.4cqmin; bottom: 8cqmin; display: flex; align-items: center; gap: 1.4cqmin; }
.sm-ui__user b, .sm-ui__head b { width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; background: linear-gradient(135deg, #ff9a62, #ff5a1f); box-shadow: 0 0 0 0.4cqmin #fff; }
.sm-ui__user em { padding: 0.8cqmin 1.4cqmin; border: 0.3cqmin solid #fff; border-radius: 1cqmin; font-style: normal; font-size: 2.2cqmin; }
.sm-ui__cap { position: absolute; left: 2.4cqmin; bottom: 4cqmin; width: 60%; height: 1.4cqmin; border-radius: 1cqmin; background: rgba(255, 255, 255, 0.75); }
.sm-ui__head { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.4cqmin; padding: 2cqmin 2.4cqmin; background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); }
.sm-ui__head em { margin-left: auto; font-style: normal; }
.sm-ui__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3cqmin; padding: 2.4cqmin; font-size: 4cqmin; background: linear-gradient(transparent, rgba(0, 0, 0, 0.45)); }
.sm-ui__foot i:first-child { color: #ff3d7f; } .sm-ui__foot u { margin-left: auto; text-decoration: none; }
/* format etiketi */
.sm-fmt__tag { position: absolute; left: 50%; bottom: 6%; display: grid; transform: translateX(-50%); }
.sm-fmt__tag span { grid-area: 1 / 1; justify-self: center; padding: 1.8cqmin 3.4cqmin; border-radius: 99px; background: #fff; color: #19171c; font: 800 3.6cqmin/1 var(--display); white-space: nowrap; box-shadow: 0 2cqmin 5cqmin rgba(0, 0, 0, 0.3); opacity: 0; animation: sm-tagf 9s infinite; }
.sm-fmt__tag .t2 { animation-delay: 3s; background: #19171c; color: #fff; } .sm-fmt__tag .t3 { animation-delay: 6s; background: var(--c); color: #fff; box-shadow: 0 0 0 0.5cqmin #fff; }
@keyframes sm-tagf { 0%, 3% { opacity: 0; transform: translateY(2cqmin); } 7%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translateY(-2cqmin); } }
/* Ana sayfa (yatay kart): yerleşim ince ayarı */
.feature__media .sm-comp { right: 34%; height: 50%; }
.feature__media .sm-ease { top: 7%; right: 6%; width: 24cqw; }
.feature__media .sm-tl { bottom: 8%; }
.feature__media .sm-browser { left: 6%; width: 62%; top: 9%; }
.feature__media .sm-speed { left: auto; right: 7%; top: 6%; width: 15cqmin; height: 15cqmin; }
.feature__media .sm-mob { right: 8%; bottom: 7%; height: 36cqmin; }
.feature__media .sm-toast { left: 6%; bottom: 7%; }
.feature__media .sm-fmt { transform: scale(0.84); padding-bottom: 14cqmin; }
.feature__media .sm-fmt__tag { bottom: 4%; }
.feature__media .sm-cal { width: 72%; }
@media (prefers-reduced-motion: reduce) { .sm * { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

.motion { position: relative; width: 100%; height: 100%; min-height: inherit; background: var(--c); overflow: hidden; display: grid; place-items: center; container-type: size; }
.motion i, .motion b { display: block; }
.is-offscreen .motion *, .motion.is-offscreen * { animation-play-state: paused !important; }
.sm.is-offscreen * { animation-play-state: paused !important; }

/* Yörünge */
.motion--orbit .m-core { width: 22cqmin; height: 22cqmin; border-radius: 50%; background: var(--a); animation: pulse 2.4s var(--ease-io) infinite; }
.motion--orbit .m-ring { position: absolute; width: 46cqmin; height: 46cqmin; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--a) 40%, transparent); animation: spin 6s linear infinite; }
.motion--orbit .m-ring--2 { width: 70cqmin; height: 70cqmin; animation-duration: 10s; animation-direction: reverse; }
.motion--orbit .m-ring--3 { width: 94cqmin; height: 94cqmin; animation-duration: 16s; }
.motion--orbit .m-ring b { position: absolute; top: -5cqmin; left: calc(50% - 5cqmin); width: 10cqmin; height: 10cqmin; border-radius: 50%; background: var(--a); }
.motion--orbit .m-ring--2 b { background: #fff; width: 7cqmin; height: 7cqmin; top: -3.5cqmin; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.18); } }

/* Yığın */
.motion--stack i { position: absolute; width: 46cqw; height: 56cqh; border-radius: 4cqmin; background: var(--a); box-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, 0.18); animation: stack 4s var(--ease-io) infinite; animation-delay: calc(var(--i) * -1s); }
.motion--stack i:nth-child(even) { background: #fff; }
@keyframes stack {
  0% { transform: translate(0, 30cqh) rotate(-8deg) scale(0.9); opacity: 0; }
  20% { transform: translate(-6cqw, 4cqh) rotate(-6deg); opacity: 1; }
  45% { transform: translate(0, 0) rotate(0deg); }
  70% { transform: translate(6cqw, -4cqh) rotate(6deg); opacity: 1; }
  100% { transform: translate(0, -30cqh) rotate(10deg) scale(0.9); opacity: 0; }
}

/* Esneme */
.m-word { display: flex; gap: 1cqw; font: 900 38cqmin/0.8 var(--display); color: var(--a); letter-spacing: -0.04em; }
.m-word b { animation: stretch 2.2s var(--ease-io) infinite; animation-delay: calc(var(--i) * 0.18s); transform-origin: bottom; }
@keyframes stretch { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(1.6) scaleX(0.8); } 55% { transform: scaleY(0.7) scaleX(1.15); } }

/* Dalga */
.motion--ripple > i { position: absolute; width: 30cqmin; height: 30cqmin; border-radius: 50%; border: 2px solid var(--a); animation: ripple 3.2s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.8s); opacity: 0; }
.motion--ripple .m-dot { width: 16cqmin; height: 16cqmin; border-radius: 50%; background: var(--a); position: relative; animation: pulse 1.6s var(--ease-io) infinite; }
@keyframes ripple { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(3.6); opacity: 0; } }

/* Izgara */
.m-grid { display: grid; grid-template-columns: repeat(3, 18cqmin); gap: 4cqmin; }
.m-grid i { width: 18cqmin; height: 18cqmin; background: var(--a); border-radius: 2cqmin; animation: tile 2.8s var(--ease-io) infinite; animation-delay: calc(var(--i) * 0.09s); }
@keyframes tile { 0%, 100% { transform: scale(1) rotate(0); border-radius: 2cqmin; } 40% { transform: scale(0.55) rotate(90deg); border-radius: 50%; } 60% { transform: scale(0.55) rotate(90deg); border-radius: 50%; } }

/* Tipografi */
.motion--type { align-content: center; gap: 2cqh; }
.m-type { display: block; width: 100%; overflow: hidden; white-space: nowrap; font: 800 17cqh/1 var(--display); letter-spacing: -0.04em; color: var(--a); }
.m-type--rev { color: transparent; -webkit-text-stroke: 1.5px var(--a); }
.m-type > span { display: inline-block; animation: type-slide 12s linear infinite; }
.m-type--rev > span { animation-direction: reverse; }
@keyframes type-slide { to { transform: translateX(-50%); } }

/* Çubuklar */
.m-bars { display: flex; align-items: flex-end; gap: 3cqw; height: 60cqh; }
.m-bars i { width: 7cqw; height: 100%; background: var(--a); border-radius: 99px; transform-origin: bottom; animation: bars 1.4s var(--ease-io) infinite alternate; animation-delay: calc(var(--i) * -0.23s); }
@keyframes bars { 0% { transform: scaleY(0.15); } 100% { transform: scaleY(1); } }

/* Damla */
.m-blob { position: absolute; width: 60cqmin; height: 60cqmin; background: var(--a); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: blob 7s var(--ease-io) infinite alternate, spin 18s linear infinite; mix-blend-mode: multiply; }
.m-blob--2 { width: 44cqmin; height: 44cqmin; background: #fff; mix-blend-mode: normal; opacity: 0.5; animation-duration: 5s, 12s; animation-direction: alternate-reverse, reverse; }
@keyframes blob { 50% { border-radius: 63% 37% 41% 59% / 56% 62% 38% 44%; } 100% { border-radius: 37% 63% 52% 48% / 40% 34% 66% 60%; } }

@keyframes pulse { 50% { transform: scale(1.12); } }

/* -------------------------------------------------------------------------
   Duyarlı düzen
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .nav__inner { padding-top: 24px; padding-bottom: 24px; gap: 24px; }
  .nav__toggle { width: 52px; height: 52px; }
  .nav__menu { display: none; }
  /* Tam ekran menü (Jitter mobil ölçüleri): gri zemin, yukarıdan iner, alt kenarında geniş gölge */
  .mpanel { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 0; padding: 116px 20px 34px; background: var(--gray); pointer-events: auto; visibility: hidden; transform: translateY(-100%); box-shadow: 0 500px 250px rgba(0, 0, 0, 0.02), 0 400px 200px rgba(0, 0, 0, 0.1), 0 160px 160px rgba(0, 0, 0, 0.08), 0 40px 80px rgba(0, 0, 0, 0.1); transition: transform 0.5s cubic-bezier(0.7, 0, 0.84, 0), visibility 0s 0.5s; overflow-y: auto; overscroll-behavior: contain; }
  .nav.is-open .mpanel { visibility: visible; transform: none; transition: transform 0.75s var(--ease-slide), visibility 0s; }
  .nav__inner { z-index: 1; }
  .mpanel__links { display: flex; flex-direction: column; }
  .mpanel__links a { display: block; padding: 5px 0; font: 600 40px/1.12 var(--display); letter-spacing: -0.025em; color: #b9b7bd; opacity: 0; transform: translateY(12px); transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s, transform 0.2s; }
  .nav.is-open .mpanel__links a { color: var(--ink); opacity: 1; transform: none; transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(0.2s + var(--i) * 0.03s), opacity 0.3s calc(0.05s + var(--i) * 0.02s), transform 0.7s var(--ease-slide) calc(0.05s + var(--i) * 0.02s); }
  .mpanel__links a:active, .mpanel__links a[aria-current] { color: #ff5a1f; }
  .mpanel__cta { align-self: center; margin-top: auto; min-width: 161px; opacity: 0; transform: translateY(-48px); transition: opacity 0.2s, transform 0.2s; }
  .nav.is-open .mpanel__cta { opacity: 1; transform: none; transition: opacity 0.15s, transform 0.8s var(--ease-slide) 0.05s; }
  .nav.is-open .nav__bar { transform: translateY(-140px); box-shadow: none; }
  .mega, .nav__sheet { display: none !important; }
  .nav__toggle { display: grid; }
  .nav__more { display: none; }
  :root { --nav-h: 100px; }
  .nav__bar { top: 10px; left: 10px; right: 10px; width: auto; height: 80px; margin-left: 0; }
  .nav.is-min .nav__logo { opacity: 0; }
  .nav.is-min .nav__ghost { display: none; }
  .nav__ghost { display: none; }
  .nav__actions { gap: 10px; }
}

@media (max-width: 900px) {
  .head h2, .page-head h1 { font-size: 56px; }
  .hero__title { font-size: 64px; line-height: 0.92; }
  .quote p { font-size: 54px; }
  .footer__cta h2 { font-size: 64px; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .footer__contact { grid-column: span 2; }
  .reveal__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .loved { padding: 56px 40px; }
  .contact, .service, .head--two { grid-template-columns: 1fr; }
  .pcard__panel { width: 46%; padding: 22px; }
  .pcard__media { right: calc(46% + 12px); }
  .pcard__panel h3 { font-size: 24px; }
  .pcard__metric strong { font-size: 48px; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav__inner { padding-left: 30px; padding-right: 20px; }
  .nav__logo .logo { height: 24px; transform: none; }
  .nav__cta { display: none; }
  .nav__ghost { display: inline; }
  .nav__toggle { width: 52px; height: 52px; }
  .hero { padding-top: 40px; padding-bottom: 230px; }
  .hero__title { max-width: 340px; margin: 38px auto 0; font-size: 58px; line-height: 0.98; letter-spacing: -2.2px; }
  .hero__cta.btn--xl { height: 60px; padding: 0 50px; font-size: 20px; }
  .react--icon { width: 38px; height: 38px; }
  .react--icon svg { width: 18px; height: 18px; }
  .react--pill { height: 34px; padding: 0 12px 0 5px; font-size: 13px; }
  .react--pill i { width: 24px; height: 24px; }
  .btn--xl { height: 52px; font-size: 17px; }
  .btn--xxl { height: 60px; font-size: 18px; padding: 0 26px; }
  .trust { margin-top: 81px; }
  .trust__line { display: block; padding: 0 12px; text-wrap: balance; }
  .trust__line::before, .trust__line::after { display: none; }
  .trust__logos { display: none; }
  .trust__ticker { display: block; overflow: hidden; margin: 30px calc(-1 * var(--gutter)) -12px; }
  .trust__ticker-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: ticker var(--ticker-s, 94s) linear infinite; }
  .trust__ticker-item { flex: none; display: flex; align-items: center; height: 64px; }
  .trust__ticker-item img:not(.is-sized) { height: 28px; width: auto; }
  .showroll__item { width: 300px; }
  .card { padding-bottom: 30px; border-radius: 30px; }
  .card__stage, .grid .card__stage { height: 320px; }
  .card__poster, .grid .card__poster { width: 180px; }
  .card__meta { padding: 0 24px; }
  .card__text strong { font-size: 17px; }
  .manifest { padding: 96px 0 110px; }
  .manifest__text { font-size: 30px; }
  .reel__frame { height: 300px; }
  .reel__screen { width: 82%; }
  .reel__comp strong { font-size: 38px; }
  .block { padding-bottom: 110px; }
  .pstack { --pcard-h: auto; }
  .pstack__bar { position: static; height: auto; margin-bottom: 20px; }
  .pstack__bar h3 { font-size: 22px; }
  .pcard { top: 96px; margin-bottom: 24px; }
  .pcard__inner { display: flex; flex-direction: column; border-radius: 26px; }
  .pcard__media { position: relative; right: auto; height: 230px; }
  .pcard__panel { position: relative; inset: auto; width: auto; margin: 0 10px 10px; margin-top: -10px; padding: 22px; border-radius: 20px; }
  .pcard__panel h3 { margin-top: 16px; font-size: 26px; }
  .pcard__metric { margin-top: 22px; }
  .head { margin-bottom: 44px; }
  .head h2, .page-head h1 { font-size: 44px; }
  .h2-sm, .head .h2-sm { font-size: 38px; }
  .head--split { flex-direction: column; align-items: flex-start; }
  .features, .scale, .grid, .duo { grid-template-columns: 1fr; }
  .feature { padding: 28px 28px 32px; }
  .details { grid-template-columns: 1fr; gap: 32px; }
  .quote { padding-bottom: 120px; }
  .quote p { font-size: 38px; }
  .slide { width: 86vw; min-height: 520px; padding: 30px; border-radius: 30px; }
  .slide__visual { height: 240px; margin-bottom: 40px; }
  .loved { grid-template-columns: 1fr; padding: 44px 28px; }
  .loved h2 { font-size: 34px; }
  .mascots { height: auto; max-width: 360px; margin: 8px auto 0; }
  .duo__card { padding: 36px 30px; border-radius: 30px; min-height: 230px; }
  .reveal__inner { grid-template-columns: 1fr; gap: 64px; padding-top: 110px; padding-bottom: 130px; }
  .sticker { height: 170px; zoom: 0.8; }
  .reveal__news h2 { font-size: 30px; }
  .news input { padding-right: 140px; }
  .news button { width: 120px; font-size: 16px; }
  .footer__social { gap: 22px; }
  .footer__sheet { padding-top: 100px; border-radius: 0 0 48px 48px; }
  .footer__cta h2 { font-size: 46px; }
  .footer__cols { grid-template-columns: 1fr 1fr; margin-top: 80px; }
  .footer__contact { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; gap: 20px; align-items: flex-start; margin-top: 64px; }
  .service { padding: 30px; border-radius: 30px; }
  .process { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .contact__card { padding: 26px; border-radius: 30px; }
  .page-head { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .showroll { overflow-x: auto; }
}

/* ---------- Vaka sayfaları (marka renkleri değişkenlerle; varsayılan BRN Mühendislik) ---------- */
.cs { --b-ink: #082116; --b-deep: #0c2e20; --b-green: #1d6142; --b-lime: #c6d42b; --b-on: var(--b-ink); --b-cream: #f7f5ee; --b-glow: 198, 212, 43; --b-ink-rgb: 8, 33, 22; --b-mid-rgb: 29, 97, 66; --b-strip-i: var(--b-green); --cs-display: var(--display); --cs-wide: 1320px; }
/* Ak-Gny Asansör: petrol mavisi zemin, alarm kırmızısı eylem rengi */
.cs--akg { --b-ink: #04303f; --b-deep: #044f63; --b-green: #06738e; --b-lime: #e30613; --b-on: #fff; --b-cream: #e3f0f3; --b-glow: 159, 212, 226; --b-ink-rgb: 4, 48, 63; --b-mid-rgb: 6, 115, 142; --b-strip-i: rgba(255, 255, 255, 0.6); --cs-display: 'Space Grotesk', var(--display); }
.cs img { height: auto; }
.cs h2 { font-size: 56px; line-height: 0.98; letter-spacing: -0.04em; }
.cs-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--display); letter-spacing: -0.01em; color: var(--muted); }
.cs-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--b-lime); }
.cs-sechead { max-width: 640px; margin-bottom: 56px; }
.cs-sechead h2 { margin-top: 18px; }
.cs-sechead p { margin-top: 22px; color: var(--ink-2); font-size: 18px; line-height: 27px; }
.cs-sechead--light h2, .cs-sechead--light p { color: #fff; }
.cs-sechead--light p { color: rgba(255, 255, 255, 0.7); }

/* Kaydırınca belirme */
.js .cs-rv { opacity: 0; transform: translateY(36px); transition: opacity 0.7s var(--ease) var(--d, 0s), transform 0.9s var(--ease-expo) var(--d, 0s); }
.js .cs-rv.is-in { opacity: 1; transform: none; }

/* Giriş */
.cs-head { padding-top: 34px; padding-bottom: 72px; }
.cs-head__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-title { margin-top: 24px; font-size: 88px; line-height: 0.92; letter-spacing: -0.05em; }
.cs-title em { font-style: normal; color: var(--b-green); }
.cs-w { display: inline-block; overflow: hidden; padding: 0.06em 0.02em 0.14em; margin: -0.06em -0.02em -0.14em; vertical-align: top; }
.cs-w > span { display: inline-block; }
.js .cs-w > span { transform: translateY(110%); animation: cs-rise 0.95s var(--ease-expo) calc(0.1s + var(--i) * 0.06s) forwards; }
@keyframes cs-rise { to { transform: none; } }
.cs-lead { max-width: 600px; margin-top: 32px; font-size: 20px; line-height: 30px; color: var(--ink-2); }
.cs-link { color: var(--b-green); font-weight: 600; }
.cs-link:hover { text-decoration: underline; }

/* Sahne */
.cs-stage { padding: 0 var(--gutter); }
.cs-stage__box { position: relative; max-width: var(--cs-wide); margin: 0 auto; padding: 96px 7% 0; border-radius: var(--r); background: radial-gradient(70% 60% at 85% 0%, rgba(var(--b-glow), 0.22), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(var(--b-mid-rgb), 0.55), transparent 70%), var(--b-ink); overflow: hidden; transform: scale(var(--stage-s, 1)); transform-origin: 50% 0; }
.cs-browser { position: relative; z-index: 1; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; }
.cs-browser__bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; background: #f0f0ee; border-bottom: 1px solid #e3e3df; }
.cs-browser__bar > i { width: 11px; height: 11px; border-radius: 50%; background: #d9d8d3; }
.cs-browser__url { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; transform: translateX(-24px); height: 28px; padding: 0 16px; border-radius: 8px; background: #fff; font: 500 13px/1 var(--body); color: var(--ink-2); }
.cs-browser__url svg { width: 12px; color: var(--b-green); }
.cs-browser__view { container-type: size; aspect-ratio: 16 / 9.4; overflow: hidden; }
.cs-browser__view img { width: 100%; height: auto; max-width: none; will-change: transform; animation: cs-scroll 34s var(--ease-io) 1.2s infinite; }
.cs-browser:hover .cs-browser__view img { animation-play-state: paused; }
/* Duraklamalı kaydırma: açılış → yaklaşım → hizmetler → süreç → şarj → kapanış → başa dön */
@keyframes cs-scroll {
  0%, 6% { transform: translateY(0); }
  14%, 20% { transform: translateY(calc((-100% + 100cqh) * 0.17)); }
  28%, 34% { transform: translateY(calc((-100% + 100cqh) * 0.42)); }
  42%, 48% { transform: translateY(calc((-100% + 100cqh) * 0.66)); }
  56%, 62% { transform: translateY(calc((-100% + 100cqh) * 0.83)); }
  70%, 82% { transform: translateY(calc(-100% + 100cqh)); }
  94%, 100% { transform: translateY(0); }
}
.cs-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font: 600 16px/1 var(--display); letter-spacing: -0.02em; box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(16px) scale(0.9); transition: opacity 0.5s var(--ease), transform 0.8s var(--spring); }
.cs-float b { color: #3ddc84; font-size: 12px; }
.is-in .cs-float { opacity: 1; transform: none; animation: bob 4s ease-in-out infinite; }
.cs-float--a { left: 3%; top: 26%; background: #fff; color: var(--ink); transition-delay: 0.3s; animation-delay: 1s !important; }
.cs-float--b { right: 3%; top: 40px; background: var(--ink); color: #fff; transition-delay: 0.45s; }
.cs-float--c { right: 2.5%; top: 52%; background: var(--b-lime); color: var(--b-on); transition-delay: 0.6s; animation-delay: 2s !important; }
.cs-float--d { left: 4%; bottom: 12%; background: var(--orange); color: var(--ink); transition-delay: 0.75s; animation-delay: 1.5s !important; }

/* Özet */
.cs-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 140px; padding-bottom: 72px; }
.cs-brief h2 { margin-top: 18px; font-size: 44px; line-height: 1; letter-spacing: -0.035em; }
.cs-brief p { font-size: 18px; line-height: 28px; color: var(--ink-2); }
.cs-brief p + p { margin-top: 18px; }
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 160px; }
.cs-stats > div { padding-top: 20px; border-top: 2px solid var(--ink); }
.cs-stats strong { display: block; font: 800 72px/1 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.cs-stats span { display: block; margin-top: 10px; font-size: 15px; line-height: 20px; color: var(--ink-2); }

/* Marka sistemi */
.cs-brand { padding-bottom: 160px; }
.cs-brand__grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.cs-swatches { grid-row: span 2; display: flex; flex-direction: column; gap: 8px; }
.cs-swatch { flex: 1; min-height: 76px; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 20px; border-radius: 20px; background: var(--c); color: var(--t, #fff); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: flex-grow 0.5s var(--ease), opacity 0.7s var(--ease) var(--d, 0s), transform 0.9s var(--ease-expo) var(--d, 0s); }
.cs-swatch:hover { flex-grow: 2.2; }
.cs-swatch b { font: 700 18px/1.1 var(--display); letter-spacing: -0.02em; }
.cs-swatch span { margin-top: 4px; font: 500 13px/1 ui-monospace, 'SF Mono', Menlo, monospace; opacity: 0.75; }
.cs-type { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 22px; padding: 28px; border-radius: 28px; background: var(--b-cream); }
.cs-type__aa { grid-row: span 2; font: 600 112px/0.9 var(--cs-display); letter-spacing: -0.06em; color: var(--b-green); }
.cs-type b { display: block; font: 700 26px/1 var(--cs-display); letter-spacing: -0.03em; }
.cs-type div span { display: block; margin-top: 8px; font-size: 15px; line-height: 21px; color: var(--ink-2); }
.cs-type__w { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-type__w i { font: normal 14px/1 var(--body); padding: 7px 11px; border-radius: 999px; background: #fff; }
.cs-logo { display: grid; place-items: center; min-height: 220px; padding: 40px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cs-logo img { width: min(260px, 70%); transition: transform 0.6s var(--spring); }
.cs-logo:hover img { transform: scale(1.06) rotate(-2deg); }

/* Süreç (yapışkan) */
.cs-proc { height: 300vh; background: var(--b-cream); }
.cs-proc__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.cs-proc__in { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; max-width: calc(var(--cs-wide) + var(--gutter) * 2); padding-top: 60px; }
.cs-proc__text p { margin-top: 20px; font-size: 17px; line-height: 26px; color: var(--ink-2); }
.cs-proc__text h2 { margin-top: 18px; font-size: 48px; }
.cs-proc__steps { list-style: none; margin: 32px 0 0; padding: 0; }
.cs-proc__steps li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(var(--b-ink-rgb), 0.12); color: rgba(var(--b-ink-rgb), 0.35); transition: color 0.4s var(--ease); }
.cs-proc__steps li b { font: 700 14px/26px var(--display); }
.cs-proc__steps li span { font: 700 22px/26px var(--display); letter-spacing: -0.02em; }
.cs-proc__steps small { display: block; max-height: 0; overflow: hidden; font: 500 15px/22px var(--body); letter-spacing: -0.01em; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.5s var(--ease); }
.cs-proc__steps li.is-on { color: var(--b-ink); }
.cs-proc__steps li.is-on b { color: var(--b-green); }
.cs-proc__steps li.is-on small { max-height: 44px; margin-top: 4px; opacity: 0.7; }
.cs-proc__frame { position: relative; aspect-ratio: 1600 / 722; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(var(--b-ink-rgb), 0.35), 0 0 0 1px rgba(var(--b-ink-rgb), 0.06); }
.cs-proc__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.03); transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-expo); }
.cs-proc__frame img.is-on { opacity: 1; transform: none; }
.cs-proc__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(var(--b-ink-rgb), 0.08); }
.cs-proc__bar i { position: absolute; inset: 0; background: var(--b-lime); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Ekranlar */
.cs-screens { padding-top: 160px; padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.cs-screens .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.cs-shot { margin: 0; border-radius: 24px; overflow: hidden; background: var(--b-cream); box-shadow: 0 0 0 1px var(--line); }
.cs-shot img { width: 100%; height: auto; }
.cs-shot--wide img { transform: scale(1.08); transform-origin: 50% 50%; }
.cs-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.cs-shots .cs-shot { display: grid; align-items: center; }
.cs-shot--tall { position: relative; }
.cs-shot__scroll { height: 640px; overflow: hidden; }
.cs-shot__scroll img { transition: transform 4.5s var(--ease-io); }
.cs-shot--tall:hover .cs-shot__scroll img { transform: translateY(calc(-100% + 640px)); }
.cs-shot figcaption { position: absolute; left: 20px; bottom: 20px; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--b-ink); color: #fff; font: 600 14px/1 var(--display); }

/* Mobil */
.cs-mobile { padding: 140px 0 0; background: radial-gradient(60% 50% at 50% 100%, rgba(var(--b-glow), 0.2), transparent 70%), var(--b-ink); overflow: hidden; }
.cs-phones { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding-top: 30px; height: 640px; }
.cs-phone { flex: none; width: 270px; padding: 10px; border-radius: 46px; background: #1b1d1c; box-shadow: 0 0 0 2px #2c2f2d, 0 40px 80px -20px rgba(0, 0, 0, 0.7); }
.cs-phone img { width: 100%; border-radius: 36px; }
.cs-phone:nth-child(2) { margin-top: -30px; }
.cs-phone:nth-child(odd) { margin-top: 70px; }

/* Hizmet şeridi */
.cs-strip { overflow: hidden; background: var(--b-lime); color: var(--b-on); }
.cs-strip__track { display: flex; align-items: center; gap: 28px; width: max-content; padding: 22px 0; font: 700 26px/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; animation: cs-strip 40s linear infinite; }
.cs-strip__track i { font-style: normal; color: var(--b-strip-i); }
@keyframes cs-strip { to { transform: translateX(-50%); } }

/* Neler yaptık */
.cs-scope { padding-top: 160px; padding-bottom: 120px; }
.cs-scope__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; list-style: none; margin: 0; padding: 0; }
.cs-scope__list li { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); font: 600 19px/1.25 var(--display); letter-spacing: -0.02em; }
.cs-scope__list svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--b-lime); color: var(--b-on); }

/* Kapanış */
.cs-end { padding-bottom: 140px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.cs-end__box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 24px; border-radius: var(--r); background: radial-gradient(60% 80% at 50% 0%, rgba(var(--b-glow), 0.25), transparent 70%), var(--b-ink); color: #fff; }
.cs-end__box img { width: 150px; padding: 14px 20px; border-radius: 18px; background: #fff; }
.cs-end__box h2 { margin-top: 32px; font-size: 64px; }
.cs-end__box p { margin-top: 16px; color: rgba(255, 255, 255, 0.7); }
.cs-end__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.cs-btn-lime { background: var(--b-lime); color: var(--b-on); }
.cs .btn:hover { scale: 1.06; }

/* Oymak: toprak kahvesi zemin, hasat sarısı eylem rengi */
.cs--oymak { --b-ink: #3a2408; --b-deep: #5a380f; --b-green: #704815; --b-lime: #f2ac00; --b-on: #2a1a06; --b-cream: #f7f1e6; --b-glow: 242, 172, 0; --b-ink-rgb: 58, 36, 8; --b-mid-rgb: 112, 72, 21; --b-strip-i: #704815; }
/* Profil ızgarası sahnesi */
.cs-ig-stage { display: flex; justify-content: center; padding: 72px 24px 0; min-height: 640px; }
.cs-ig { position: relative; z-index: 1; width: 360px; height: 600px; padding: 52px 12px 0; border-radius: 52px 52px 0 0; background: #fff; box-shadow: 0 0 0 12px #17110a, 0 0 0 13px rgba(255, 255, 255, 0.15), 0 50px 90px -20px rgba(0, 0, 0, 0.6); overflow: hidden; }
.cs-ig::before { content: ''; position: absolute; left: 50%; top: 12px; width: 100px; height: 28px; margin-left: -50px; border-radius: 16px; background: #17110a; }
.cs-ig__head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
.cs-ig__avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f2ac00; }
.cs-ig__avatar img { width: 42px; }
.cs-ig__name b { display: block; font: 700 16px/1.2 var(--display); }
.cs-ig__name small { font: 500 13px/1.2 var(--body); color: var(--muted); }
.cs-ig__tabs { display: flex; border-top: 1px solid var(--line); }
.cs-ig__tabs i { flex: 1; height: 34px; }
.cs-ig__tabs i.on { box-shadow: inset 0 1px 0 #19171c; }
.cs-ig__view { height: 500px; overflow: hidden; margin: 0 -12px; }
.cs-ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; animation: cs-ig-scroll 40s linear infinite; }
.cs-ig__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cs-ig:hover .cs-ig__grid { animation-play-state: paused; }
@keyframes cs-ig-scroll { to { transform: translateY(calc(-50% - 1px)); } }
.cs-ig-float { position: absolute; z-index: 0; width: 260px; border-radius: 18px; box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.6s var(--ease) 0.3s, transform 1s var(--ease-expo) 0.3s; }
.cs-ig-float--l { left: 9%; top: 150px; transform: translateX(60px) rotate(0deg); }
.cs-ig-float--r { right: 9%; top: 230px; transform: translateX(-60px) rotate(0deg); }
.is-in .cs-ig-float--l { opacity: 1; transform: rotate(-8deg); }
.is-in .cs-ig-float--r { opacity: 1; transform: rotate(7deg); }
.cs-ig-stage .cs-float--a { left: 6%; top: 90px; }
.cs-ig-stage .cs-float--c { right: 5%; top: 150px; }
.cs-ig-stage .cs-float--d { left: 7%; bottom: 60px; }
.cs-ig-stage .cs-float--b b { color: #ff3d6e; font-size: 15px; }
/* Oymak sahnesi: eğik akan post duvarı, önde beğenilen post */
.cs-oy-stage { height: 780px; padding: 0; display: grid; place-items: center; perspective: 1600px; background: radial-gradient(60% 60% at 50% 45%, #8a5a1c 0%, #4a2e0a 70%, #2a1a06 100%); }
.cs-oy-plane { position: absolute; left: 50%; top: 50%; width: 1800px; height: 1500px; margin: -750px 0 0 -900px; display: flex; gap: 22px; justify-content: center; transform: rotateX(38deg) rotateZ(-24deg) scale(0.92); transform-style: preserve-3d; }
.cs-oy-col { width: 270px; flex: none; overflow: hidden; }
.cs-oy-col__track { display: flex; flex-direction: column; gap: 22px; animation: cs-oy-up var(--sp, 36s) linear infinite; }
.cs-oy-col--down .cs-oy-col__track { animation-direction: reverse; }
.cs-oy-col img { width: 270px; height: 270px; border-radius: 18px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.55); }
@keyframes cs-oy-up { to { transform: translateY(calc(-50% - 11px)); } }
.cs-oy-shade { position: absolute; inset: 0; background: radial-gradient(30% 45% at 50% 50%, rgba(42, 26, 6, 0.45), rgba(42, 26, 6, 0) 70%), linear-gradient(rgba(42, 26, 6, 0.35), rgba(42, 26, 6, 0) 25%, rgba(42, 26, 6, 0) 75%, rgba(42, 26, 6, 0.45)); pointer-events: none; }
.cs-oy-post { position: relative; z-index: 2; width: 420px; margin: 0; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 60px 110px -20px rgba(0, 0, 0, 0.75); transform: translateY(40px) scale(0.9) rotate(-2deg); opacity: 0; transition: transform 1.1s var(--spring) 0.2s, opacity 0.5s var(--ease) 0.2s; }
.is-in .cs-oy-post { transform: rotate(-2deg); opacity: 1; animation: bob 5s ease-in-out 1.4s infinite; }
.cs-oy-post header { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; }
.cs-oy-post header .cs-ig__avatar { width: 36px; height: 36px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #f2ac00; }
.cs-oy-post header .cs-ig__avatar img { width: 30px; }
.cs-oy-post header b { font: 700 15px/1 var(--display); }
.cs-oy-post header i { margin-left: auto; font-style: normal; font-weight: 800; }
.cs-oy-post__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.cs-oy-post__img img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: cs-oy-swap 12s var(--ease-io) infinite; animation-delay: calc(var(--k) * 3s); }
/* her post 3 sn kalır, sağdan kayarak gelir */
@keyframes cs-oy-swap { 0% { opacity: 1; transform: translateX(100%); } 5%, 25% { opacity: 1; transform: none; } 30%, 100% { opacity: 1; transform: translateX(-100%); } }
.cs-oy-heart { position: absolute; left: 50%; top: 50%; width: 120px; margin: -60px 0 0 -60px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); opacity: 0; animation: cs-oy-pop 3s var(--ease) 1.2s infinite; }
@keyframes cs-oy-pop { 0%, 30% { opacity: 0; transform: scale(0); } 36% { opacity: 1; transform: scale(1.15); } 42% { transform: scale(0.95); } 48% { opacity: 1; transform: scale(1); } 58%, 100% { opacity: 0; transform: scale(1.2); } }
.cs-oy-post footer { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 16px; }
.cs-oy-post footer svg { width: 26px; height: 26px; fill: none; stroke: #19171c; stroke-width: 1.9; stroke-linejoin: round; }
.cs-oy-post footer .cs-oy-save { margin-left: auto; }
.cs-oy-like { animation: cs-oy-like 3s var(--ease) 1.2s infinite; }
@keyframes cs-oy-like { 0%, 33% { fill: none; stroke: #19171c; transform: scale(1); } 38% { fill: #ff3040; stroke: #ff3040; transform: scale(1.3); } 46%, 92% { fill: #ff3040; stroke: #ff3040; transform: scale(1); } 100% { fill: none; stroke: #19171c; } }
.cs-oy-stage .cs-float { z-index: 3; }
.cs-oy-stage .cs-float--a { left: calc(50% - 330px); top: 170px; }
.cs-oy-stage .cs-float--a b { color: #ff3040; font-size: 15px; }
.cs-oy-stage .cs-float--b { right: calc(50% - 320px); top: 120px; left: auto; }
.cs-oy-stage .cs-float--c { right: calc(50% - 340px); top: 440px; }
.cs-oy-stage .cs-float--d { left: calc(50% - 320px); bottom: 150px; }
@media (max-width: 640px) {
  .cs-oy-stage { height: 560px; }
  .cs-oy-plane { transform: rotateX(38deg) rotateZ(-24deg) scale(0.6); }
  .cs-oy-post { width: 270px; }
  .cs-oy-stage .cs-float--a { left: 12px; top: 22px; }
  .cs-oy-stage .cs-float--b { right: 12px; top: 22px; }
  .cs-oy-stage .cs-float--c { right: 12px; top: auto; bottom: 26px; }
  .cs-oy-stage .cs-float--d { left: 12px; bottom: 26px; display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-oy-col__track, .cs-oy-heart, .cs-oy-like, .is-in .cs-oy-post { animation: none; }
  .cs-oy-post__img img { animation: none; opacity: 0; } .cs-oy-post__img img:first-child { opacity: 1; }
  .cs-oy-post { opacity: 1; transform: none; }
}

/* Şablon anatomisi */
.cs-anat { position: relative; margin: 0; border-radius: 28px; overflow: hidden; }
.cs-anat img { width: 100%; display: block; }
.cs-anat__pin { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 13px/1 var(--display); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); transform: translate(-50%, -50%); }
.cs-anat__pin b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--b-lime); color: var(--b-on); font-size: 12px; }
.cs--oymak .cs-brand__grid { grid-template-rows: auto auto; }
.cs--oymak .cs-anat { grid-row: span 1; }
.cs-proc__frame--sq { aspect-ratio: 1 !important; max-width: 560px; justify-self: center; width: 100%; }
/* Post duvarı */
.cs-wall { padding: 160px 0; overflow: hidden; background: var(--b-cream); }
.cs-wall__row { overflow: hidden; }
.cs-wall__row + .cs-wall__row { margin-top: 16px; }
.cs-wall__track { display: flex; gap: 16px; width: max-content; animation: cs-strip 60s linear infinite; }
.cs-wall__row--rev .cs-wall__track { animation-direction: reverse; }
.cs-wall__row:hover .cs-wall__track { animation-play-state: paused; }
.cs-wall__track img { width: 300px; height: 300px; border-radius: 20px; transition: transform 0.4s var(--ease); }
.cs-wall__track img:hover { transform: scale(1.04); }
.cs-end__box img.cs-end__logo { width: 200px; padding: 0; background: none; border-radius: 0; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3)); }
@media (max-width: 960px) {
  .cs-ig-float { display: none; }
  .cs-proc__frame--sq { max-width: none; }
}
@media (max-width: 640px) {
  .cs-ig-stage { padding: 56px 12px 0; min-height: 0; }
  .cs-ig { width: 290px; height: 500px; }
  .cs-ig__view { height: 410px; }
  .cs-ig-stage .cs-float--a { left: 10px; top: 12px; }
  .cs-ig-stage .cs-float--b { right: 10px; top: 12px; }
  .cs-wall { padding: 110px 0; }
  .cs-wall__track img { width: 200px; height: 200px; }
  .cs-anat__pin { height: 26px; font-size: 12px; }
}
/* ---------- İmza bölümleri: her vaka sayfasında markadan gelen tek etkileşim ---------- */
.sig { padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.sig .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
/* Bölüm etiketindeki nokta markaya göre değişir */
.cs--brn .cs-kicker::before { width: 10px; height: 14px; border-radius: 0; background: var(--b-green); clip-path: polygon(58% 0, 8% 58%, 46% 58%, 38% 100%, 92% 38%, 54% 38%); }
.cs--akg .cs-kicker::before { width: 10px; height: 9px; border-radius: 0; background: var(--b-lime); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cs--oymak .cs-kicker::before { width: 12px; height: 8px; border-radius: 50%; background: var(--b-lime); transform: rotate(-20deg); }

/* BRN · Elektrik panosu */
.pano { display: grid; grid-template-columns: 1fr 70px 1.15fr; align-items: center; padding: 56px; border-radius: var(--r); background: radial-gradient(60% 70% at 0% 0%, rgba(198, 212, 43, 0.14), transparent 60%), var(--b-ink); }
.pano__box { padding: 22px 22px 26px; border-radius: 22px; background: linear-gradient(#e9ebe6, #d5d9d2); box-shadow: inset 0 2px 0 #fff, 0 30px 50px -24px rgba(0, 0, 0, 0.6); }
.pano__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font: 700 13px/1 var(--display); letter-spacing: 0.08em; color: #5d655c; }
.pano__head i { width: 12px; height: 12px; border-radius: 50%; background: #9aa198; transition: background 0.3s, box-shadow 0.3s; }
.pano.is-live .pano__head i { background: var(--b-lime); box-shadow: 0 0 12px var(--b-lime); }
.pano__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 14px 10px; border-radius: 10px; background: #c3c8c0; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15); }
.brk { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; }
.brk__body { position: relative; width: 100%; max-width: 56px; height: 118px; border-radius: 7px; background: linear-gradient(90deg, #f7f7f4, #fff 40%, #ecece8); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.brk__win { position: absolute; left: 50%; top: 12px; width: 18px; height: 8px; margin-left: -9px; border-radius: 2px; background: #d64545; transition: background 0.2s; }
.brk[aria-pressed="true"] .brk__win { background: var(--b-lime); }
.brk__lever { position: absolute; left: 50%; top: 30px; width: 24px; height: 60px; margin-left: -12px; border-radius: 4px; background: #e6e6e1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.brk__lever::after { content: ''; position: absolute; left: 3px; right: 3px; height: 28px; top: 29px; border-radius: 3px; background: linear-gradient(#2c3a2f, #121a14); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35); transition: top 0.32s var(--spring); }
.brk[aria-pressed="true"] .brk__lever::after { top: 3px; background: linear-gradient(var(--b-green), #0e3b27); }
.brk__rate { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 11px/1 var(--display); color: #8b908a; }
.brk__lbl { font: 600 13px/1.15 var(--display); letter-spacing: -0.01em; color: #5d655c; text-align: center; transition: color 0.2s; }
.brk[aria-pressed="true"] .brk__lbl { color: var(--b-ink); }
.brk:hover .brk__body { transform: translateY(-2px); }
.brk__body { transition: transform 0.2s var(--ease); }
.pano__wire { position: relative; height: 4px; margin: 0 -6px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pano__wire i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--b-lime) 0 14px, transparent 14px 26px); opacity: 0; transition: opacity 0.3s; }
.pano.is-live .pano__wire i { opacity: 1; animation: pano-flow 0.6s linear infinite; }
@keyframes pano-flow { to { background-position: 26px 0; } }
.pano__screen { border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 70px -30px rgba(0, 0, 0, 0.8); }
.pano__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #eeeeea; }
.pano__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d3ce; }
.pano__bar span { position: absolute; left: 50%; transform: translateX(-50%); font: 500 12px/1 var(--body); color: #5d655c; white-space: nowrap; }
.pano__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0f0c; }
.pano__view img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.pano.is-live .pano__view img { opacity: 1; }
.pano__view img.flick { animation: pano-flick 0.5s steps(1) both; }
@keyframes pano-flick { 0% { opacity: 0; } 15% { opacity: 0.8; } 25% { opacity: 0.1; } 40% { opacity: 1; filter: brightness(1.6); } 55% { opacity: 0.6; } 70%, 100% { opacity: 1; filter: none; } }
.pano__off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.45); font: 600 15px/1 var(--display); transition: opacity 0.3s; }
.pano__off svg { width: 34px; color: rgba(198, 212, 43, 0.5); }
.pano.is-live .pano__off { opacity: 0; }

/* Ak-Gny · Asansör kumandası */
.lift { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; padding: 56px; border-radius: var(--r); background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) center / 64px 100%, var(--b-ink); }
.lift__panel { padding: 24px; border-radius: 22px; background: linear-gradient(110deg, #9fb0b6 0%, #dfe7ea 22%, #f4f7f8 38%, #c4d0d4 58%, #e7eef0 78%, #a7b7bc 100%); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff; }
.lift__disp { display: flex; align-items: center; justify-content: center; gap: 16px; height: 74px; border-radius: 12px; background: #050b0d; box-shadow: inset 0 0 0 2px #1d2b30; }
.lift__disp b { font: 700 44px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.04em; color: #ff2a2a; text-shadow: 0 0 14px rgba(255, 42, 42, 0.7); }
.lift__disp i { font-style: normal; font-size: 14px; color: #ff2a2a; opacity: 0.18; transition: opacity 0.2s; }
.lift__disp i.lit { opacity: 1; text-shadow: 0 0 10px rgba(255, 42, 42, 0.8); }
.lift__btns { display: grid; gap: 12px; margin-top: 22px; }
.lbtn { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; text-align: left; }
.lbtn b { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff, #d8e1e4 60%, #b8c6cb); box-shadow: 0 4px 8px rgba(4, 48, 63, 0.35), inset 0 0 0 3px #c7d2d6, inset 0 0 0 5px transparent; font: 700 18px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: #04303f; transition: box-shadow 0.25s, transform 0.15s; }
.lbtn span { font: 700 20px/1 var(--display); letter-spacing: -0.02em; color: #04303f; }
.lbtn:hover b { transform: scale(1.05); }
.lbtn:active b { transform: scale(0.94); }
.lbtn.is-on b { box-shadow: 0 4px 8px rgba(4, 48, 63, 0.35), inset 0 0 0 3px #e30613, 0 0 16px rgba(227, 6, 19, 0.55); color: #e30613; }
.lift__alarm { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: #e30613; color: #fff; font: 700 15px/1 var(--display); }
.lift__alarm span { font-size: 16px; }
.lift__shaft { position: relative; padding: 0 0 0; }
.lift__top { display: flex; justify-content: center; margin-bottom: 14px; }
.lift__top span { padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 15px/1 var(--display); }
.lift__car { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #0c1a1f; box-shadow: 0 0 0 10px #0a2632, 0 0 0 11px rgba(255, 255, 255, 0.12), 0 40px 70px -30px rgba(0, 0, 0, 0.8); }
.lift__car img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lift__door { position: absolute; top: 0; bottom: 0; width: 50.2%; background: linear-gradient(90deg, #7f949b 0%, #c9d5d9 18%, #eef3f4 34%, #b3c2c7 52%, #dfe7ea 70%, #8fa2a8 100%); transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.lift__door--l { left: 0; transform: translateX(-100%); box-shadow: inset -3px 0 0 rgba(4, 48, 63, 0.5); }
.lift__door--r { right: 0; transform: translateX(100%); box-shadow: inset 3px 0 0 rgba(4, 48, 63, 0.5); }
.lift.is-closed .lift__door { transform: none; }

/* Oymak · Soru kartı */
.quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px; border-radius: var(--r); background: var(--b-cream); }
.quiz__card { border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 30px 50px -28px rgba(58, 36, 8, 0.45); }
.quiz__q { padding: 26px 30px; background: linear-gradient(#8fe08a, #c9f2c4); font: 800 30px/1 var(--display); letter-spacing: -0.03em; color: #0d5a26; }
.quiz__opts { display: grid; gap: 12px; padding: 28px 30px 32px; }
.qopt { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 18px; border: 1.5px solid #bfe8bb; border-radius: 16px; background: #fff; text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.3s var(--spring); }
.qopt b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #6cc566; font: 700 15px/1 var(--display); color: #2f8f3a; }
.qopt span { flex: 1; font: 600 20px/1 var(--display); letter-spacing: -0.02em; color: #3a2408; }
.qopt svg { width: 24px; color: #2f8f3a; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.35s var(--spring); }
.qopt:hover { transform: translateX(4px); border-color: #6cc566; }
.qopt.is-on { border-color: #2f8f3a; background: #f1fbef; }
.qopt.is-on svg { opacity: 1; transform: none; }
.quiz__ans { position: relative; perspective: 1400px; }
.quiz__flip { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(58, 36, 8, 0.55); transform-origin: 50% 50%; }
.quiz__flip img { width: 100%; aspect-ratio: 1; display: block; }
.quiz__flip.flip { animation: quiz-flip 0.7s var(--ease-expo); }
@keyframes quiz-flip { 0% { transform: rotateY(0); } 45% { transform: rotateY(90deg) scale(0.94); } 46% { transform: rotateY(-90deg) scale(0.94); } 100% { transform: rotateY(0); } }
.quiz__pill { position: absolute; left: 50%; bottom: -22px; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 14px; border-radius: 999px; background: #2f8f3a; color: #fff; font: 700 17px/1 var(--display); white-space: nowrap; transform: translateX(-50%); box-shadow: 0 14px 24px -10px rgba(47, 143, 58, 0.7); }
.quiz__pill svg { width: 20px; }
.quiz__pill.pop { animation: quiz-pop 0.6s var(--spring); }
@keyframes quiz-pop { 0% { transform: translateX(-50%) scale(0.6); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

@media (max-width: 960px) {
  .pano { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .pano__wire { width: 4px; height: 40px; margin: 0 auto; }
  .lift { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .lift__btns { grid-template-columns: 1fr 1fr; }
  .quiz { grid-template-columns: 1fr; padding: 28px; gap: 40px; }
}
@media (max-width: 640px) {
  .sig { padding-bottom: 110px; }
  .pano, .lift, .quiz { border-radius: 28px; padding: 18px; }
  .pano__box { padding: 14px; }
  .pano__row { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  .brk__body { height: 96px; }
  .brk__lever { top: 26px; height: 50px; }
  .brk__lever::after { height: 22px; top: 25px; }
  .lift__panel { padding: 16px; }
  .lbtn b { width: 48px; height: 48px; }
  .lbtn span { font-size: 16px; }
  .quiz__q { font-size: 24px; padding: 20px; }
  .quiz__opts { padding: 18px; }
  .qopt span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pano.is-live .pano__wire i { animation: none; }
  .pano__view img.flick, .quiz__flip.flip, .quiz__pill.pop { animation: none; }
  .lift__door { transition: none; }
}

/* ---------- Ajans vaka yapısı: dev ad, açılan sahne, zorluk, yatay galeri, roller, sonraki proje ---------- */
/* Giriş */
.cx-hero { padding-top: 30px; padding-bottom: 64px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.cx-hero__top { display: flex; justify-content: space-between; align-items: center; }
.cx-hero__top .back { margin: 0; }
.cx-hero__idx { font: 600 15px/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.cx-hero__name { margin-top: 36px; font-size: clamp(64px, 12.4vw, 200px); line-height: 0.86; letter-spacing: -0.06em; white-space: normal; }
.cx-hero__name .cs-w { padding-bottom: 0.1em; margin-bottom: -0.1em; }
.cx-hero__row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: end; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.cx-hero__lead { max-width: 620px; font-size: 20px; line-height: 30px; color: var(--ink-2); }
.cx-hero__lead b { display: block; margin-bottom: 12px; font: 800 32px/1.08 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.cx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 0; }
.cx-meta dt { font-size: 14px; color: var(--muted); }
.cx-meta dd { margin: 4px 0 0; font: 600 17px/1.3 var(--display); letter-spacing: -0.02em; }
/* Sahne: kaydırdıkça kenarlardan açılıp tam genişliğe yayılır */
.cs-stage { padding: 0 calc(var(--gutter) * (1 - var(--sp, 0))); }
.cs-stage__box { transform: none !important; max-width: calc(var(--cs-wide) + (100% - var(--cs-wide)) * var(--sp, 0)); border-radius: calc(var(--r) * (1 - var(--sp, 0))); }
/* Zorluk */
.cx-chal { padding-top: 170px; padding-bottom: 150px; }
.cx-chal .cs-kicker { margin-bottom: 30px; }
.cx-chal__text { max-width: 980px; font: 800 52px/1.06 var(--display); letter-spacing: -0.04em; color: var(--faint); }
.cx-chal__text .w { transition: color 0.3s; }
.cx-chal__text .w.is-on { color: var(--ink); }
.no-fill .cx-chal__text { color: var(--ink); }
.cx-chal__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 900px; margin-top: 64px; margin-left: auto; }
.cx-chal__cols p { font-size: 18px; line-height: 28px; color: var(--ink-2); }
/* Yatay galeri */
.cx-hs { position: relative; height: var(--hs-h, 300vh); margin-bottom: 120px; }
.cx-hs__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.cx-hs__head { width: 100%; margin-bottom: 40px; }
.cx-hs__head h2 { margin-top: 16px; }
.cx-hs__track { display: flex; gap: 28px; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right: 12vw; width: max-content; will-change: transform; }
.cx-hs__item { flex: none; margin: 0; }
.cx-hs__item img { height: 52vh; width: auto; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 30px 50px -30px rgba(0, 0, 0, 0.35); transition: transform 0.6s var(--ease); }
.cx-hs__item:hover img { transform: scale(0.98); }
.cx-hs__item figcaption { display: flex; gap: 12px; margin-top: 16px; font: 600 17px/1 var(--display); letter-spacing: -0.02em; }
.cx-hs__item figcaption b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-hs__bar { width: 100%; margin-top: 40px; }
.cx-hs__bar::before { content: ''; display: block; height: 2px; background: var(--line); }
.cx-hs__bar i { display: block; height: 2px; margin-top: -2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
/* Roller */
.cx-credits { padding-top: 150px; padding-bottom: 150px; }
.cx-credits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.cx-credits h3 { font: 800 26px/1 var(--display); letter-spacing: -0.03em; }
.cx-credits ul { list-style: none; margin: 20px 0 0; padding: 0; }
.cx-credits li { padding: 9px 0; font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.cx-visit { display: flex; align-items: center; gap: 24px; margin-top: 110px; padding: 34px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.cx-visit span { font: 600 17px/1 var(--display); color: var(--muted); white-space: nowrap; }
.cx-visit b { flex: 1; font: 800 clamp(40px, 6.4vw, 104px)/0.95 var(--display); letter-spacing: -0.055em; transition: transform 0.6s var(--ease); }
.cx-visit svg { width: 64px; flex: none; transition: transform 0.5s var(--spring); }
.cx-visit:hover b { transform: translateX(16px); }
.cx-visit:hover svg { transform: rotate(45deg) scale(1.1); }
/* Sonraki proje */
.cx-next { --cs-wide: 1320px; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; min-height: 92vh; padding: 150px max(var(--gutter), calc((100vw - var(--cs-wide)) / 2)) 72px; background: var(--ink); color: #fff; overflow: hidden; }
.cx-next__label span + span::before { content: '·'; margin-right: 24px; }
.cx-next__label { grid-column: 1 / -1; align-self: start; display: flex; gap: 24px; justify-content: flex-start; font: 600 17px/1 var(--display); color: rgba(255, 255, 255, 0.55); }
.cx-next__name { position: relative; z-index: 2; font: 800 clamp(64px, 11vw, 190px)/0.86 var(--display); letter-spacing: -0.06em; transition: transform 0.8s var(--ease-expo); }
.cx-next__media { position: relative; z-index: 1; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(3deg); transition: transform 0.6s var(--ease), border-radius 0.6s; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.8); }
.cx-next__media video, .cx-next__media img { width: 100%; height: 100%; object-fit: cover; }
.cx-next__go { position: absolute; left: max(var(--gutter), calc((100vw - var(--cs-wide)) / 2)); top: 50%; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 18px/1 var(--display); transform: translateY(-50%) scale(0.9); opacity: 0; transition: opacity 0.3s, transform 0.5s var(--spring); }
.cx-next__go svg { width: 22px; }
.cx-next:hover .cx-next__go { opacity: 1; transform: translateY(-50%) scale(1); }
.cx-next:hover .cx-next__name { transform: translateX(24px); }
.cx-next:hover .cx-next__media { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(0deg) scale(1.04); }
@media (max-width: 960px) {
  .cx-hero__row { grid-template-columns: 1fr; gap: 36px; }
  .cx-chal__text { font-size: 38px; }
  .cx-chal__cols { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .cx-hs { height: auto !important; margin-bottom: 90px; }
  .cx-hs__pin { position: static; height: auto; }
  .cx-hs__track { transform: none !important; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter); scrollbar-width: none; }
  .cx-hs__item { scroll-snap-align: start; }
  .cx-hs__item img { height: 260px; }
  .cx-hs__bar { display: none; }
  .cx-credits__grid { grid-template-columns: 1fr; gap: 28px; }
  .cx-next { grid-template-columns: 1fr; min-height: 0; padding-top: 110px; padding-bottom: 56px; }
  .cx-next__media { width: 220px; justify-self: end; }
  .cx-next__go { display: none; }
}
@media (max-width: 640px) {
  .cx-hero__name { margin-top: 26px; }
  .cx-hero__lead b { font-size: 26px; }
  .cx-meta { grid-template-columns: 1fr 1fr; }
  .cx-chal { padding-top: 110px; padding-bottom: 100px; }
  .cx-chal__text { font-size: 30px; }
  .cx-hs__item img { height: 200px; border-radius: 16px; }
  .cx-credits { padding-top: 100px; padding-bottom: 100px; }
  .cx-visit { flex-wrap: wrap; gap: 12px; margin-top: 70px; padding: 26px 0; }
  .cx-visit svg { width: 40px; }
  .cx-next__media { width: 180px; }
}

/* ---------- Fitlab: post + reels vaka sayfası ---------- */
.cs--fit { --b-ink: #111111; --b-deep: #1e1e1e; --b-green: #ff3d7f; --b-lime: #ff3d7f; --b-on: #111; --b-cream: #f4f1ec; --b-glow: 255, 61, 127; --b-ink-rgb: 17, 17, 17; --b-mid-rgb: 255, 61, 127; --b-strip-i: #111; }
.cs--fit .cs-strip, .cs--fit .cs-btn-lime { color: #111; }
.logo-fit { position: relative; display: inline-block; width: 0.9em; height: 0.36em; border-radius: 0.18em; background: currentColor; }
.logo-fit::before, .logo-fit::after { content: ''; position: absolute; top: -0.22em; width: 0.2em; height: 0.8em; border-radius: 0.06em; background: currentColor; }
.logo-fit::before { left: -0.1em; } .logo-fit::after { right: -0.1em; }
/* Sahne */
.fx-stage { display: flex; justify-content: center; align-items: flex-end; min-height: 700px; padding: 70px 24px 0; background: radial-gradient(60% 60% at 50% 30%, rgba(255, 61, 127, 0.35), transparent 70%), #111; overflow: hidden; }
.fx-phone { position: relative; z-index: 2; width: 340px; padding: 12px 12px 0; border-radius: 54px 54px 0 0; background: #050505; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 60px 100px -30px rgba(0, 0, 0, 0.8); }
.fx-phone__screen { position: relative; aspect-ratio: 9 / 16; height: auto; max-height: 610px; border-radius: 42px 42px 0 0; overflow: hidden; background: #111; }
.fx-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.fx-reel.is-on { opacity: 1; }
.fx-bars { position: absolute; left: 14px; right: 14px; top: 16px; display: flex; gap: 5px; z-index: 3; }
.fx-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.fx-bars b { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.fx-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(transparent 65%, rgba(0, 0, 0, 0.35)); }
.fx-ui__side { position: absolute; right: 12px; bottom: 90px; display: grid; gap: 18px; }
.fx-ui__side span { display: grid; place-items: center; width: 40px; height: 40px; }
.fx-ui__side svg { width: 28px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.fx-ui__cap { position: absolute; left: 16px; right: 60px; bottom: 26px; color: #fff; font: 500 13px/1.35 var(--body); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.fx-ui__cap b { display: block; margin-bottom: 4px; font: 700 14px/1 var(--display); }
.fx-tap { position: absolute; top: 0; bottom: 0; z-index: 4; width: 50%; border: 0; background: none; cursor: pointer; }
.fx-tap--prev { left: 0; } .fx-tap--next { right: 0; }
.fx-stage__post { position: absolute; z-index: 1; width: 270px; border-radius: 18px; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.6s var(--ease) 0.3s, transform 1s var(--ease-expo) 0.3s; }
.fx-stage__post--l { left: calc(50% - 470px); top: 160px; transform: translateX(80px); }
.fx-stage__post--r { right: calc(50% - 470px); top: 230px; transform: translateX(-80px); }
.is-in .fx-stage__post--l { opacity: 1; transform: rotate(-7deg); }
.is-in .fx-stage__post--r { opacity: 1; transform: rotate(6deg); }
.fx-stage .cs-float { z-index: 3; }
.fx-stage .cs-float--a { left: calc(50% - 300px); top: 110px; background: #ff3d7f; color: #111; }
.fx-stage .cs-float--b { right: 5%; top: 40px; }
.fx-stage .cs-float--c { right: calc(50% - 330px); top: 520px; }
.fx-stage .cs-float--d { left: calc(50% - 330px); top: 560px; }
/* Reels */
.fx-reels { padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.fx-reels .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.fx-reels__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.fx-reelcard { margin: 0; }
.fx-reelcard:nth-child(2) { margin-top: 70px; }
.fx-reelcard__ph { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px var(--line), 0 40px 60px -34px rgba(0, 0, 0, 0.5); }
.fx-reelcard__ph video { width: 100%; height: 100%; object-fit: cover; }
.fx-reelcard__badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #111; font: 600 13px/1 var(--display); }
.fx-reelcard__badge svg { width: 14px; }
.fx-reelcard figcaption { margin-top: 18px; }
.fx-reelcard figcaption b { display: block; font: 800 24px/1.1 var(--display); letter-spacing: -0.03em; }
.fx-reelcard figcaption span { display: block; margin-top: 8px; font-size: 16px; line-height: 23px; color: var(--ink-2); }
/* Postlar */
.fx-posts { padding: 160px 0; background: var(--gray); }
.fx-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.fx-post { margin: 0; position: relative; border-radius: 22px; overflow: hidden; }
.fx-post img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease); }
.fx-post:hover img { transform: scale(1.04); }
.fx-post figcaption { position: absolute; left: 16px; bottom: 16px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; font: 600 14px/1 var(--display); opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.3s var(--ease); }
.fx-post:hover figcaption { opacity: 1; transform: none; }
/* Profil */
.fx-prof { display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: center; padding-top: 160px; padding-bottom: 160px; }
.fx-prof__text h2 { margin-top: 18px; }
.fx-prof__text p { margin-top: 22px; max-width: 460px; font-size: 18px; line-height: 27px; color: var(--ink-2); }
.fx-seg { position: relative; display: inline-flex; margin-top: 34px; padding: 5px; border-radius: 999px; background: var(--gray); }
.fx-seg button { position: relative; z-index: 1; height: 46px; padding: 0 26px; border: 0; background: none; font: 600 17px/1 var(--display); color: var(--muted); transition: color 0.25s; }
.fx-seg button[aria-selected="true"] { color: #fff; }
.fx-seg i { position: absolute; left: 5px; top: 5px; height: 46px; width: var(--sw, 50%); border-radius: 999px; background: var(--ink); transform: translateX(var(--sx, 0px)); transition: transform 0.45s var(--spring), width 0.3s var(--ease); }
.fx-prof__phone { padding: 22px 0 0; border-radius: 44px; background: #fff; box-shadow: 0 0 0 10px #111, 0 50px 80px -30px rgba(0, 0, 0, 0.45); overflow: hidden; }
.fx-prof__head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; }
.fx-prof__av { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #ff3d7f; color: #111; font-size: 30px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.fx-prof__head b { display: block; font: 700 17px/1.2 var(--display); }
.fx-prof__head small { font-size: 13px; color: var(--muted); }
.fx-prof__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); text-align: center; font-size: 16px; color: var(--faint); }
.fx-prof__tabs span { padding: 10px 0; transition: color 0.25s; }
.fx-prof__tabs span.is-on { color: var(--ink); }
.fx-prof__tabs i { position: absolute; left: 0; top: -1px; width: 50%; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease); }
.fx-prof__tabs.is-reel i { transform: translateX(100%); }
.fx-prof__grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 520px; overflow: hidden; align-content: start; }
.fx-prof__grid.is-on { display: grid; animation: fx-in 0.45s var(--ease); }
@keyframes fx-in { from { opacity: 0; transform: translateX(var(--fx-from, 30px)); } }
.fx-prof__grid--post img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fx-prof__grid--reel span { position: relative; aspect-ratio: 9 / 16; overflow: hidden; }
.fx-prof__grid--reel img { width: 100%; height: 100%; object-fit: cover; }
.fx-prof__grid--reel i { position: absolute; left: 8px; bottom: 6px; font-style: normal; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.fx-endlogo { display: inline-flex; align-items: center; gap: 0.3em; font: 900 64px/1 var(--display); letter-spacing: -0.05em; color: #ff3d7f; }
@media (max-width: 960px) {
  .fx-stage__post { display: none; }
  .fx-reels__row { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .fx-reelcard { scroll-snap-align: start; }
  .fx-reelcard:nth-child(2) { margin-top: 0; }
  .fx-prof { grid-template-columns: 1fr; gap: 48px; }
  .fx-prof__phone { max-width: 380px; width: 100%; justify-self: center; }
}
@media (max-width: 640px) {
  .fx-stage { min-height: 0; padding: 50px 12px 0; }
  .fx-phone { width: 260px; }
  .fx-stage .cs-float--a { left: 12px; top: 12px; } .fx-stage .cs-float--b { right: 12px; top: 12px; }
  .fx-stage .cs-float--c, .fx-stage .cs-float--d { display: none; }
  .fx-posts { padding: 100px 0; }
  .fx-posts__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fx-post { border-radius: 14px; }
  .fx-reels { padding-bottom: 100px; }
  .fx-prof { padding-top: 100px; padding-bottom: 100px; }
  .fx-prof__grid { height: 420px; }
}

/* ---------- Skipoint: kurumsal kimlik ---------- */
.cs--ski { --b-ink: #1f4f8a; --b-deep: #17406f; --b-green: #3d80cb; --b-lime: #3d80cb; --b-on: #fff; --b-cream: #eaf2fb; --b-glow: 159, 196, 236; --b-ink-rgb: 31, 79, 138; --b-mid-rgb: 61, 128, 203; --b-strip-i: rgba(255, 255, 255, 0.7); }
/* Sahne: karlı zemin */
.sk-stage { min-height: 620px; padding: 0; display: grid; place-items: center; background: linear-gradient(#f7fafe 0%, #e6eff9 70%, #d6e5f5 100%); overflow: hidden; }
.sk-mtn { position: absolute; left: 0; bottom: 0; width: 100%; height: 46%; }
.sk-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-snow { position: absolute; inset: 0; pointer-events: none; }
.sk-snow i { position: absolute; left: var(--x); top: -20px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(61, 128, 203, 0.3); animation: sk-fall var(--t) linear var(--d) infinite; }
@keyframes sk-fall { to { transform: translate(30px, 720px); } }
.sk-logo { position: relative; z-index: 1; width: min(72%, 820px); margin-bottom: 60px; }
.sk-logo img { width: 100%; height: auto; }
.sk-stage .cs-float--a { left: 6%; top: 60px; }
.sk-stage .cs-float--b { right: 5%; top: 40px; }
.sk-stage .cs-float--c { right: 8%; top: auto; bottom: 70px; background: #3d80cb; color: #fff; }
/* Logo anatomisi */
.sk-ana { height: calc(var(--n) * 80vh + 20vh); background: var(--b-cream); }
.sk-ana__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.sk-ana__in { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 56px; align-items: center; max-width: calc(var(--cs-wide) + var(--gutter) * 2); padding-top: 60px; }
.sk-ana__text h2 { margin-top: 18px; font-size: 48px; }
.sk-ana__list { list-style: none; margin: 30px 0 0; padding: 0; }
.sk-ana__list li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(31, 79, 138, 0.14); color: rgba(31, 79, 138, 0.35); transition: color 0.4s var(--ease); }
.sk-ana__list li b { font: 700 14px/26px var(--display); }
.sk-ana__list li span { font: 700 22px/26px var(--display); letter-spacing: -0.02em; }
.sk-ana__list small { display: block; max-height: 0; overflow: hidden; font: 500 15px/22px var(--body); letter-spacing: -0.01em; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.5s var(--ease); }
.sk-ana__list li.is-on { color: #1f4f8a; }
.sk-ana__list li.is-on b { color: #3d80cb; }
.sk-ana__list li.is-on small { max-height: 70px; margin-top: 6px; opacity: 0.8; }
.sk-ana__frame { position: relative; aspect-ratio: 16 / 11; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -30px rgba(31, 79, 138, 0.35), 0 0 0 1px rgba(31, 79, 138, 0.06); }
.sk-ana__logo { position: absolute; left: 8%; right: 8%; top: 50%; aspect-ratio: 1461 / 528; transform: translateY(-50%) translate(var(--tx, 0%), var(--ty, 0%)) scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), transform-origin 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.sk-ana__logo img { width: 100%; height: 100%; }
.sk-ana__pin-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #3d80cb; opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.5s var(--spring); }
.sk-ana__pin-dot::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #3d80cb; opacity: 0; }
.sk-ana__pin-dot.is-on { opacity: 1; transform: scale(calc(1 / var(--z, 1))); }
.sk-ana__pin-dot.is-on::after { animation: sk-ping 1.6s ease-out 0.6s infinite; }
@keyframes sk-ping { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.2); } }
.sk-ana__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(31, 79, 138, 0.08); }
.sk-ana__bar i { position: absolute; inset: 0; background: #3d80cb; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* Varyasyonlar */
.sk-vars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.sk-var { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 28px; border-radius: 24px; }
.sk-var img { width: 100%; height: auto; }
.sk-var > span:last-child { position: absolute; left: 18px; bottom: 14px; font: 600 13px/1 var(--display); opacity: 0.6; }
.sk-var--white { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: #1f4f8a; }
.sk-var--blue { background: #3d80cb; color: #fff; }
.sk-var--deep { background: #12233b; color: #fff; }
.sk-var--icon { background: #eaf2fb; color: #1f4f8a; }
.sk-icon { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 26%; background: #3d80cb; box-shadow: 0 16px 30px -12px rgba(31, 79, 138, 0.5); }
.sk-icon img { width: 74%; }
.sk-swatches { flex-direction: row; height: 120px; }
/* Uygulamalar */
.sk-apps { padding: 160px 0; background: var(--gray); }
.sk-apps__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.sk-app { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; }
.sk-app figcaption { position: absolute; left: 22px; bottom: 18px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; font: 600 14px/1 var(--display); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.25); }
.sk-app--card { background: linear-gradient(135deg, #dbe7f5, #f3f7fc); }
.sk-bc { position: absolute; width: 46%; aspect-ratio: 85 / 55; border-radius: 10px; box-shadow: 0 30px 40px -20px rgba(31, 79, 138, 0.5); transition: transform 0.8s var(--ease); }
.sk-bc--back { background: #3d80cb; display: grid; place-items: center; transform: translate(-22%, -18%) rotate(-10deg); }
.sk-bc--back img { width: 64%; }
.sk-bc--front { background: #fff; transform: translate(18%, 14%) rotate(6deg); padding: 7% 8%; display: flex; flex-direction: column; justify-content: space-between; }
.sk-bc__logo { width: 48%; }
.sk-bc__txt b { display: block; font: 700 15px/1.2 var(--display); color: #1f4f8a; }
.sk-bc__txt span { display: block; font: 500 11px/1.5 var(--body); color: #5f7ea6; }
.sk-app--card:hover .sk-bc--back { transform: translate(-28%, -22%) rotate(-14deg); }
.sk-app--card:hover .sk-bc--front { transform: translate(22%, 16%) rotate(3deg); }
.sk-app--pass { background: linear-gradient(160deg, #1f4f8a, #3d80cb); }
.sk-pass { position: relative; width: 34%; aspect-ratio: 54 / 86; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 50px -24px rgba(0, 0, 0, 0.5); transform: rotate(-6deg); transition: transform 0.8s var(--spring); }
.sk-app--pass:hover .sk-pass { transform: rotate(3deg) translateY(-6px); }
.sk-pass::before { content: ''; position: absolute; left: 50%; top: -100px; width: 18px; height: 112px; margin-left: -9px; background: #12233b; }
.sk-pass__hole { position: absolute; left: 50%; top: 10px; z-index: 2; width: 36px; height: 9px; margin-left: -18px; border-radius: 5px; background: #1f4f8a; }
.sk-pass__top { height: 42%; display: grid; place-items: center; padding: 22% 12% 8%; background: #3d80cb; }
.sk-pass__top img { width: 100%; }
.sk-pass__body { padding: 10% 12%; color: #1f4f8a; }
.sk-pass__body span { display: block; font: 700 11px/1 var(--display); letter-spacing: 0.1em; opacity: 0.6; }
.sk-pass__body b { display: block; margin-top: 6px; font: 800 24px/1 var(--display); letter-spacing: -0.03em; }
.sk-pass__icon { width: 46%; margin-top: 14%; }
.sk-app--sign { background: #d9dde2; }
.sk-wall { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #cfd4da 0 2px, #dfe3e8 2px 80px); }
.sk-sign { position: absolute; left: 12%; right: 12%; top: 16%; height: 30%; display: grid; place-items: center; border-radius: 16px; background: #3d80cb; box-shadow: 0 30px 40px -24px rgba(0, 0, 0, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.1); }
.sk-sign img { width: 72%; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.35)); }
.sk-door { position: absolute; left: 36%; right: 36%; top: 56%; bottom: 0; background: linear-gradient(90deg, #8fa7c2, #c7d6e6 50%, #8fa7c2); border: 8px solid #12233b; border-bottom: 0; }
.sk-app--social { background: linear-gradient(135deg, #eaf2fb, #cfe0f2); }
.sk-phone { position: relative; z-index: 2; width: 36%; aspect-ratio: 9 / 17; border-radius: 30px; background: #fff; box-shadow: 0 0 0 7px #12233b, 0 40px 60px -24px rgba(0, 0, 0, 0.5); overflow: hidden; padding-top: 9%; }
.sk-phone::before { content: ''; position: absolute; left: 50%; top: 9px; width: 30%; height: 14px; margin-left: -15%; border-radius: 8px; background: #12233b; }
.sk-phone__head { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.sk-phone__head b { display: block; font: 700 11px/1.2 var(--display); }
.sk-phone__head small { display: block; font-size: 8.5px; color: var(--muted); }
.sk-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #3d80cb; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #3d80cb; }
.sk-av img { width: 62%; }
.sk-phone__hl { display: flex; gap: 6px; padding: 2px 10px 8px; }
.sk-hl { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 7.5px/1 var(--display); color: #1f4f8a; }
.sk-hl i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #cfdcec; }
.sk-hl img { width: 58%; }
.sk-hl--b i { background: #3d80cb; } .sk-hl--n i { background: #12233b; } .sk-hl--i i { background: #eaf2fb; } .sk-hl--w i { background: #fff; }
.sk-phone__tabs { position: relative; height: 1px; background: var(--line); }
.sk-phone__tabs i { position: absolute; left: 0; top: -1px; width: 33.3%; height: 1.5px; background: #12233b; }
.sk-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; padding-top: 1.5px; }
.sk-phone__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sk-post { position: absolute; z-index: 1; width: 30%; border-radius: 14px; box-shadow: 0 30px 50px -24px rgba(18, 35, 59, 0.55); transition: transform 0.8s var(--ease); }
.sk-post--a { left: 6%; top: 14%; transform: rotate(-8deg); }
.sk-post--b { right: 6%; top: 30%; transform: rotate(7deg); }
.sk-app--social:hover .sk-post--a { transform: rotate(-11deg) translateX(-8px); }
.sk-app--social:hover .sk-post--b { transform: rotate(10deg) translateX(8px); }
.sk-endlogo { width: min(420px, 70%) !important; padding: 0 !important; background: none !important; }
@media (max-width: 960px) {
  .sk-ana { height: auto; padding: 110px 0; }
  .sk-ana__pin { position: static; height: auto; }
  .sk-ana__in { grid-template-columns: 1fr; padding-top: 0; gap: 36px; }
  .sk-vars { grid-template-columns: 1fr 1fr; }
  .sk-apps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sk-stage { min-height: 0; aspect-ratio: 4 / 5; }
  .sk-logo { width: 84%; margin-bottom: 30px; }
  .sk-stage .cs-float--c { display: inline-flex; right: 12px; bottom: 16px; }
  .sk-apps { padding: 100px 0; }
  .sk-swatches { height: auto; flex-direction: column; }
  .sk-bc__txt b { font-size: 11px; } .sk-bc__txt span { font-size: 8px; }
  .sk-pass__body b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sk-snow i { animation: none; display: none; } .sk-ana__logo { transition: none; } }

/* ---------- Chocolade Boutique ---------- */
.cs--cb { --b-ink: #1c2b25; --b-deep: #24372f; --b-green: #9a7536; --b-lime: #c9a35c; --b-on: #1c2b25; --b-cream: #f6f0e6; --b-glow: 201, 163, 92; --b-ink-rgb: 28, 43, 37; --b-mid-rgb: 91, 58, 41; --b-strip-i: #5b3a29; }
.cb-stage { background: radial-gradient(60% 60% at 50% 30%, rgba(201, 163, 92, 0.32), transparent 70%), #1c2b25; }
.cb-stage .cs-float--a { background: #c9a35c; color: #1c2b25; }
/* Logo bölümü */
.cb-logo { padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.cb-logo__box { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 56px; border-radius: var(--r); background: #1c2b25; color: #fff; }
.cb-logo__art { position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden; }
.cb-logo__art img { width: 100%; height: 100%; }
.cb-pin { position: absolute; display: flex; align-items: center; gap: 10px; transform: translate(-50%, -50%); }
.cb-pin i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #c9a35c; }
.cb-pin i::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #c9a35c; animation: sk-ping 1.8s ease-out infinite; }
.cb-pin b { order: -1; margin-right: 6px; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; color: #1c2b25; font: 600 15px/1 var(--display); white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5); transform: translateX(-12px); }
.cb-pin--heart b { order: 2; margin: 0 0 0 6px; transform: translateX(12px); }
.cb-pin--clef { flex-direction: row; transform: translate(calc(-100% + 8px), -50%); }
.cb-pin--heart { transform: translate(-8px, -50%); }
.cb-logo__text h2 { margin-top: 18px; color: #fff; }
.cb-logo__text p { margin-top: 20px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.72); }
.cb-logo__text .cs-kicker { color: #c9a35c; }
.cb-sw { display: flex; gap: 10px; margin-top: 32px; }
.cb-sw span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 110px; padding: 14px; border-radius: 18px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: rgba(255, 255, 255, 0.75); }
.cb-sw span b { font: 700 16px/1.2 var(--display); color: #fff; }
/* Reels duvarı: 6 video, 3 sütun */
.cb-reels__row { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
.cb-reels__row .fx-reelcard:nth-child(3n + 2) { margin-top: 70px; }
.cb-reels__row .fx-reelcard:nth-child(2) { margin-top: 70px; }
/* Fotoğraflar */
.cb-photos { padding: 160px 0; background: #f6f0e6; }
.cb-photos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.cb-photo { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 2 / 3; }
.cb-photo:nth-child(4n + 2), .cb-photo:nth-child(4n + 4) { transform: translateY(40px); }
.js .cb-photo.cs-rv.is-in:nth-child(4n + 2), .js .cb-photo.cs-rv.is-in:nth-child(4n + 4) { transform: translateY(40px); }
.cb-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.cb-photo:hover img { transform: scale(1.05); }
/* Kutu servisi */
.cb-box { padding-top: 200px; padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.cb-box__wide { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; }
.cb-box__wide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.cb-box__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.cb-box__item { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 9 / 14; }
.cb-box__item img { width: 100%; height: 100%; object-fit: cover; }
.cb-box__item figcaption { position: absolute; left: 16px; bottom: 16px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; font: 600 14px/1 var(--display); }
.cs--cb .cs-end__box { background: radial-gradient(60% 80% at 50% 0%, rgba(201, 163, 92, 0.3), transparent 70%), #1c2b25; }
.cb-endlogo { width: 220px !important; padding: 0 !important; background: none !important; border-radius: 24px !important; }
@media (max-width: 960px) {
  .cb-logo__box { grid-template-columns: 1fr; padding: 28px; gap: 32px; }
  .cb-reels__row { grid-template-columns: repeat(6, 72%); }
  .cb-reels__row .fx-reelcard:nth-child(n) { margin-top: 0; }
  .cb-photos__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cb-logo { padding-bottom: 100px; }
  .cb-logo__box { border-radius: 28px; padding: 18px; }
  .cb-pin b { font-size: 12px; height: 28px; }
  .cb-sw span { height: 90px; }
  .cb-photos { padding: 100px 0; }
  .cb-photos__grid { gap: 10px; }
  .cb-photo { border-radius: 14px; }
  .cb-box { padding-top: 140px; padding-bottom: 100px; }
  .cb-box__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cb-box__row .cb-box__item:last-child { display: none; }
}

/* ---------- DoubleTree by Hilton Suites Trabzon Yomra ---------- */
.cs--dt { --b-ink: #14163f; --b-deep: #1d2060; --b-green: #2b2f7a; --b-lime: #a3cd3b; --b-on: #14163f; --b-cream: #eef0f7; --b-glow: 163, 205, 59; --b-ink-rgb: 20, 22, 63; --b-mid-rgb: 43, 47, 122; --b-strip-i: #14163f; }
/* Sahne: Coming Soon perdesi */
.dt-stage { padding: 0; aspect-ratio: 7 / 3; min-height: 0; overflow: hidden; background: #14163f; }
.dt-suite, .dt-suite img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dt-suite img { object-fit: cover; transform-origin: 50% 46%; transform: scale(calc(1.16 - var(--pull, 0) * 0.16)); will-change: transform; animation: dt-suite-in 1.6s var(--ease-expo) both; }
@keyframes dt-suite-in { from { opacity: 0; filter: brightness(0.6); } }
.dt-suite__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(22% 30% at 40% 44%, rgba(255, 150, 80, 0.55), transparent 70%), radial-gradient(20% 28% at 62% 44%, rgba(255, 170, 110, 0.4), transparent 70%); mix-blend-mode: soft-light; opacity: calc(0.4 + var(--pull, 0) * 0.6); }
.dt-suite__tag { position: absolute; left: 50%; bottom: 7%; z-index: 3; height: 44px; padding: 0 20px; display: flex; align-items: center; gap: 10px; border-radius: 999px; background: rgba(20, 22, 63, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 600 15px/1 var(--display); white-space: nowrap; transform: translate(-50%, calc((1 - var(--pull, 0)) * 16px)); opacity: clamp(0, calc(var(--pull, 0) * 2.5 - 0.5), 1); }
.dt-suite__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #a3cd3b; }
.dt-curtain { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
.dt-curtain__p { position: relative; overflow: hidden; will-change: transform; }
.dt-curtain__p img { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
.dt-curtain__p:nth-child(1) { transform: translateX(calc(var(--open, 0) * -102%)); }
.dt-curtain__p:nth-child(2) { transform: translateY(calc(var(--open, 0) * -102%)); }
.dt-curtain__p:nth-child(3) { transform: translateX(calc(var(--open, 0) * 102%)); }
.dt-stage .cs-float { z-index: 3; }
.dt-stage .cs-float--a { left: 3%; top: 4%; opacity: calc(1 - var(--open, 0)); transform: none; animation: none; }
.dt-stage .cs-float--b { right: 3%; top: 4%; opacity: var(--open, 0); transform: none; animation: none; }
.dt-stage .cs-float--b b { color: #a3cd3b; }
/* Öne çıkanlar */
.dt-hl { display: grid; grid-template-columns: 1fr 400px; gap: 80px; align-items: center; padding-top: 40px; padding-bottom: 160px; }
.dt-hl__text h2 { margin-top: 18px; }
.dt-hl__text p { margin-top: 22px; max-width: 470px; font-size: 18px; line-height: 27px; color: var(--ink-2); }
.dt-phone { padding: 46px 0 0; border-radius: 46px; background: #fff; box-shadow: 0 0 0 10px #14163f, 0 50px 80px -30px rgba(20, 22, 63, 0.55); overflow: hidden; }
.dt-phone__head { display: flex; align-items: center; gap: 12px; padding: 0 18px 14px; }
.dt-av { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #14163f; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a3cd3b; overflow: hidden; }
.dt-av img { width: 120%; }
.dt-phone__head b { display: block; font: 700 16px/1.2 var(--display); }
.dt-phone__head small { display: block; font-size: 11.5px; color: var(--muted); }
.dt-phone__row { display: flex; gap: 10px; padding: 0 14px 14px; overflow-x: auto; scrollbar-width: none; }
.dt-hlbtn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 600 11px/1 var(--display); color: #14163f; }
.dt-hlbtn i { display: block; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d7dae6; transition: box-shadow 0.25s, transform 0.3s var(--spring); }
.dt-hlbtn img { width: 100%; height: 100%; }
.dt-hlbtn.is-on i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a3cd3b; transform: scale(1.06); }
.dt-story { position: relative; aspect-ratio: 9 / 13; overflow: hidden; background: #14163f; }
.dt-story img { width: 100%; height: 100%; object-fit: cover; object-position: top; animation: dt-in 0.5s var(--ease); }
@keyframes dt-in { from { opacity: 0; transform: scale(1.04); } }
.dt-story__bars { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 2; display: flex; gap: 4px; }
.dt-story__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); overflow: hidden; }
.dt-story__bars b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.dt-story__tap { position: absolute; inset: 0; z-index: 3; border: 0; background: none; cursor: pointer; }
/* Reels */
.dt-reels { padding-bottom: 160px; }
/* Kurabiye sahnesi (yapışkan, kaydırmaya bağlı) */
.dt-crumb { height: auto; background: radial-gradient(60% 50% at 70% 50%, #23266b 0%, #14163f 70%); color: #fff; }
.dt-crumb__pin { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 100px 0; }
.dt-crumb__in { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: center; max-width: calc(var(--cs-wide) + var(--gutter) * 2); padding-top: 60px; }
.dt-crumb__text h2 { margin-top: 18px; color: #fff; }
.dt-crumb__text .cs-kicker { color: #a3cd3b; }
.dt-crumb__steps { list-style: none; margin: 34px 0 0; padding: 0; }
.dt-crumb__steps li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.35); transition: color 0.4s var(--ease); }
.dt-crumb__steps li b { font: 700 14px/26px var(--display); }
.dt-crumb__steps li span { font: 700 22px/26px var(--display); letter-spacing: -0.02em; }
.dt-crumb__steps small { display: block; max-height: 0; overflow: hidden; font: 500 15px/22px var(--body); letter-spacing: -0.01em; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.5s var(--ease); }
.dt-crumb__steps li.is-on { color: #fff; }
.dt-crumb__steps li.is-on b { color: #a3cd3b; }
.dt-crumb__steps li.is-on small { max-height: 50px; margin-top: 6px; opacity: 0.75; }
.dt-crumb__stage { position: relative; aspect-ratio: 1; width: 100%; max-height: 78vh; justify-self: center; }
.dt-crumb__pin.is-biteable { cursor: pointer; }
.dt-crumb__tip { position: absolute; left: 0; top: 0; z-index: 5; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: #a3cd3b; color: #14163f; font: 700 14px/1 var(--display); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5); }
.dt-crumb__pin.is-biteable .dt-crumb__tip { opacity: 1; }
@media (hover: none) { .dt-crumb__tip { display: none; } }
.dt-crumb__cv { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.dt-crumb__in { position: relative; z-index: 3; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.dt-crumb__in.is-off { opacity: 0; transform: translateY(-30px); pointer-events: none; }
/* Kurabiye */
.dt-cookie { padding: 40px 0 160px; background: #14163f; color: #fff; }
.dt-cookie__in { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dt-cookie__text h2 { margin-top: 18px; color: #fff; }
.dt-cookie__text p { margin-top: 22px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); }
.dt-cookie__text .cs-kicker { color: #a3cd3b; }
.dt-cookie__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dt-shot { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; }
.dt-shot:nth-child(even) { transform: translateY(40px); }
.js .dt-shot.cs-rv.is-in:nth-child(even) { transform: translateY(40px); }
.dt-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.dt-shot:hover img { transform: scale(1.05); }
/* Özel günler */
.dt-days { padding-top: 200px; padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dt-days .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.dt-days__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dt-day { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 9 / 16; box-shadow: 0 0 0 1px var(--line); }
.dt-day:nth-child(odd) { margin-top: 40px; }
.dt-day img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.dt-day:hover img { transform: scale(1.05); }
/* Basılı ve ekran */
.dt-print { padding: 160px 0; background: var(--gray); }
.dt-print__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dt-p { position: relative; margin: 0; display: grid; place-items: center; min-height: 420px; padding: 40px; border-radius: 28px; overflow: hidden; }
.dt-p figcaption { position: absolute; left: 20px; bottom: 18px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; font: 600 14px/1 var(--display); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.25); }
.dt-p--tv { grid-column: 1 / -1; background: linear-gradient(160deg, #2b2f7a, #14163f); }
.dt-tv { width: 92%; padding: 10px 10px 14px; border-radius: 10px; background: #0b0b10; box-shadow: 0 40px 60px -24px rgba(0, 0, 0, 0.7); position: relative; }
.dt-tv::after { content: ''; position: absolute; left: 40%; right: 40%; bottom: -24px; height: 24px; background: linear-gradient(#26262e, #111); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.dt-tv img { width: 100%; border-radius: 3px; }
.dt-p--fs { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.dt-p--fs img { width: 100%; border-radius: 10px; box-shadow: 0 30px 50px -24px rgba(20, 22, 63, 0.45); }
.dt-p--menu { background: linear-gradient(135deg, #f5e8d0, #e9d3ad); min-height: 520px; }
.dt-fan { position: relative; width: 70%; aspect-ratio: 4 / 5; }
.dt-fan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.45); transition: transform 0.7s var(--ease); }
.dt-fan img:nth-child(1) { transform: rotate(-10deg) translateX(-18%); }
.dt-fan img:nth-child(2) { transform: rotate(2deg); }
.dt-fan img:nth-child(3) { transform: rotate(12deg) translateX(20%); }
.dt-p--menu:hover .dt-fan img:nth-child(1) { transform: rotate(-14deg) translateX(-26%); }
.dt-p--menu:hover .dt-fan img:nth-child(3) { transform: rotate(16deg) translateX(28%); }
.dt-p--roll { background: linear-gradient(160deg, #e7ebf5, #cdd4ea); min-height: 520px; }
.dt-rolls { display: flex; align-items: flex-end; gap: 14px; height: 100%; }
.dt-rolls img { width: 28%; height: auto; border-radius: 4px; box-shadow: 0 30px 40px -20px rgba(20, 22, 63, 0.5); }
.dt-rolls img:nth-child(2) { width: 30%; margin-bottom: 10px; }
.dt-endlogo { width: 180px !important; padding: 0 !important; background: none !important; }
.cs--dt .cs-end__box { background: radial-gradient(60% 80% at 50% 0%, rgba(163, 205, 59, 0.22), transparent 70%), #14163f; }
@media (max-width: 960px) {
  .dt-hl { grid-template-columns: 1fr; gap: 48px; }
  .dt-phone { max-width: 400px; width: 100%; justify-self: center; }
  .dt-cookie__in { grid-template-columns: 1fr; }
  .dt-crumb__pin { min-height: 0; padding: 90px 0 40px; }
  .dt-crumb__in { grid-template-columns: 1fr; gap: 10px; padding-top: 70px; }
  .dt-crumb__stage { width: min(100%, 52vh); }
  .dt-crumb__steps { margin-top: 18px; }
  .dt-crumb__steps li { padding: 8px 0; }
  .dt-crumb__steps li span { font-size: 18px; }
  .dt-crumb__text h2 { font-size: 32px; }
  .dt-days__row { grid-template-columns: repeat(6, 44%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .dt-day { scroll-snap-align: start; } .dt-day:nth-child(odd) { margin-top: 0; }
  .dt-print__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dt-stage { aspect-ratio: 4 / 5; }
  .dt-suite img { transform-origin: 50% 46%; }
  .dt-suite__tag { height: 38px; font-size: 13px; }
  .dt-curtain { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .dt-curtain__p:nth-child(1) { transform: translateX(calc(var(--open, 0) * -102%)); }
  .dt-curtain__p:nth-child(2) { transform: translateX(calc(var(--open, 0) * 102%)); }
  .dt-curtain__p:nth-child(3) { transform: translateX(calc(var(--open, 0) * -102%)); }
  .dt-curtain__p img { top: 50%; left: 50%; width: 300%; transform: translate(calc(-50% + (1 - var(--k)) * 33.33%), -50%); }
  .dt-cookie, .dt-print { padding: 100px 0; }
  .dt-days { padding-top: 140px; padding-bottom: 100px; }
  .dt-p { min-height: 300px; padding: 24px; }
  .dt-p--menu, .dt-p--roll { min-height: 380px; }
}

/* ---------- Ramada by Wyndham İskenderun ---------- */
.cs--rmd { --b-ink: #2a0d16; --b-deep: #3a1220; --b-green: #d8325a; --b-lime: #e0345e; --b-on: #fff; --b-cream: #fbeef1; --b-glow: 224, 52, 94; --b-ink-rgb: 42, 13, 22; --b-mid-rgb: 216, 50, 90; --b-strip-i: rgba(255, 255, 255, 0.6); }
.cs--rmd .cs-end__box { background: radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 70%), #d8325a; }
/* Sahne: post destesi */
.rm-stage { display: grid; place-items: center; min-height: 680px; padding: 60px 24px; overflow: hidden; background: radial-gradient(60% 60% at 50% 40%, #f0446d 0%, #d8325a 55%, #b61f45 100%); }
.rm-deck { position: relative; z-index: 2; width: min(420px, 70vw); aspect-ratio: 4 / 5; }
.rm-card { position: absolute; left: 0; right: 0; top: 50%; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; aspect-ratio: 1; box-shadow: 0 30px 60px -24px rgba(60, 0, 20, 0.6); transform: translateY(calc(-50% + var(--i) * -9px)) scale(calc(1 - var(--i) * 0.035)) rotate(calc((var(--i) - 1) * 1.6deg * var(--s, 1))); z-index: calc(20 - var(--i)); opacity: calc(1 - var(--i) * 0.2); transition: transform 0.7s var(--ease-expo), opacity 0.5s; }
.rm-card--tall { aspect-ratio: 4 / 5; }
.rm-card:nth-child(even) { --s: -1; }
.rm-card img { width: 100%; height: 100%; object-fit: cover; }
.rm-card.is-out { transform: translateY(-50%) translateX(118%) rotate(14deg); opacity: 1; transition: transform 0.55s cubic-bezier(0.55, 0, 0.75, 0.2); }
.rm-stage__story { position: absolute; z-index: 1; width: 190px; border-radius: 16px; box-shadow: 0 30px 50px -20px rgba(60, 0, 20, 0.6); opacity: 0; transition: opacity 0.6s var(--ease) 0.3s, transform 1s var(--ease-expo) 0.3s; }
.rm-stage__story--l { left: calc(50% - 470px); top: 120px; transform: translateX(60px); }
.rm-stage__story--r { right: calc(50% - 470px); top: 170px; transform: translateX(-60px); }
.is-in .rm-stage__story--l { opacity: 1; transform: rotate(-8deg); }
.is-in .rm-stage__story--r { opacity: 1; transform: rotate(7deg); }
.rm-stage .cs-float { z-index: 3; }
.rm-stage .cs-float--a { left: calc(50% - 330px); top: 70px; }
.rm-stage .cs-float--b { right: 5%; top: 40px; }
.rm-stage .cs-float--b b { color: #ff9cb4; }
.rm-stage .cs-float--c { right: calc(50% - 360px); bottom: 110px; top: auto; background: #fff; color: #d8325a; }
.rm-stage .cs-float--d { left: calc(50% - 350px); bottom: 70px; }
/* Kitapçık */
.rm-bookwrap { padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.rm-book__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right: max(0px, calc((100% - var(--wrap)) / 2)); }
.rm-book__head h2 { margin-top: 18px; }
.rm-book__hint { margin-top: 10px; font: 600 14px/1 var(--display); color: var(--muted); }
.rm-tabs { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--gray); }
.rm-tabs button { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; font: 600 16px/1 var(--display); color: var(--muted); transition: background 0.25s, color 0.25s; }
.rm-tabs button[aria-selected="true"] { background: #d8325a; color: #fff; }
.rm-book { position: relative; padding: 56px 40px; border-radius: var(--r); background: radial-gradient(60% 70% at 50% 40%, #fff 0%, #f6e7eb 100%); perspective: 2600px; }
.rm-book__inner { position: relative; width: min(900px, 100%); aspect-ratio: 1.42; margin: 0 auto; transition: transform 0.8s var(--ease-expo); transform-style: preserve-3d; }
.rm-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; }
.rm-leaf.is-flipped { transform: rotateY(-180deg); }
.rm-leaf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff; box-shadow: 0 20px 40px -18px rgba(42, 13, 22, 0.35); }
.rm-leaf__face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rm-leaf__face--front { border-radius: 0 10px 10px 0; }
.rm-leaf__face--front::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent); }
.rm-leaf__face--back { transform: rotateY(180deg); border-radius: 10px 0 0 10px; }
.rm-leaf__face--back::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 9%; background: linear-gradient(-90deg, rgba(0, 0, 0, 0.14), transparent); }
.rm-leaf.is-turning .rm-leaf__face { box-shadow: 0 40px 60px -20px rgba(42, 13, 22, 0.45); }
.rm-book__nav { position: absolute; top: 50%; z-index: 30; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: #fff; color: #d8325a; font: 700 22px/1 var(--display); box-shadow: 0 10px 24px -10px rgba(42, 13, 22, 0.4); transition: transform 0.3s var(--spring), opacity 0.2s; }
.rm-book__nav:hover { transform: scale(1.08); }
.rm-book__nav:disabled { opacity: 0.3; cursor: default; transform: none; }
.rm-book__nav--prev { left: 18px; } .rm-book__nav--next { right: 18px; }
.rm-book__count { margin-top: 18px; text-align: center; font: 600 15px/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Postlar ve story'ler */
.rm-posts { padding: 160px 0; background: #fbeef1; }
.rm-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.rm-post { margin: 0; border-radius: 20px; overflow: hidden; }
.rm-post img { width: 100%; display: block; transition: transform 0.7s var(--ease); }
.rm-post:hover img { transform: scale(1.04); }
.rm-stories { padding-top: 160px; padding-bottom: 160px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.rm-stories .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.rm-stories__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rm-story { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 9 / 16; box-shadow: 0 0 0 1px var(--line); }
.rm-story:nth-child(even) { margin-top: 44px; }
.rm-story img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  .rm-stage__story { display: none; }
  .rm-posts__grid { grid-template-columns: 1fr 1fr; }
  .rm-stories__row { grid-template-columns: repeat(5, 44%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .rm-story { scroll-snap-align: start; } .rm-story:nth-child(even) { margin-top: 0; }
}
@media (max-width: 640px) {
  .rm-stage { min-height: 0; padding: 70px 16px 60px; }
  .rm-deck { width: 68vw; }
  .rm-stage .cs-float--a { left: 12px; top: 14px; } .rm-stage .cs-float--b { right: 12px; top: 14px; }
  .rm-stage .cs-float--c, .rm-stage .cs-float--d { display: none; }
  .rm-book { padding: 28px 10px 64px; border-radius: 28px; }
  .rm-book__nav { top: auto; bottom: 10px; margin: 0; width: 44px; height: 44px; }
  .rm-book__nav--prev { left: calc(50% - 52px); } .rm-book__nav--next { right: calc(50% - 52px); }
  .rm-posts { padding: 100px 0; }
  .rm-posts__grid { gap: 10px; }
  .rm-stories { padding-top: 100px; padding-bottom: 100px; }
  .rm-bookwrap { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) { .rm-card, .rm-leaf, .rm-book__inner { transition: none; } }

/* ---------- Safir Constructeur: galeri vaka (iş önde, az metin) ---------- */
.cs--sf { --b-ink: #121b74; --b-deep: #021095; --b-green: #1d62b8; --b-lime: #1d62b8; --b-on: #fff; --b-cream: #eef3fb; --b-glow: 110, 168, 255; --b-ink-rgb: 18, 27, 116; --b-mid-rgb: 29, 98, 184; --b-strip-i: rgba(255, 255, 255, 0.75); }
.cs--sf .cs-end__box { background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 255, 255, 0.035) 140px 142px), radial-gradient(60% 80% at 50% 0%, rgba(110, 168, 255, 0.25), transparent 70%), #121b74; }
.sg { display: grid; gap: 20px; padding-bottom: 140px; }
.sg video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-frame { border-radius: 20px; overflow: hidden; aspect-ratio: 1; background: #fff; box-shadow: 0 40px 80px -40px rgba(18, 27, 116, 0.45); }
.sg-frame--story { aspect-ratio: 9 / 16; }
.sg figure { margin: 0; }
.sg figcaption { display: flex; gap: 12px; margin-top: 16px; font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink-2); }
.sg figcaption b { color: #1d62b8; font-variant-numeric: tabular-nums; }
/* tam genişlik bant: renkli zemin, ortada büyük kare iş */
.sg-one { padding: 90px var(--gutter) 40px; }
.sg-one .sg-frame { width: min(860px, 100%); margin: 0 auto; }
.sg-one figcaption { justify-content: center; max-width: none; }
.sg-light { background: #eef3fb; }
.sg-navy { background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 255, 255, 0.04) 140px 142px), #121b74; }
.sg-cobalt { background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 255, 255, 0.04) 140px 142px), #021095; }
.sg-navy figcaption, .sg-cobalt figcaption { color: rgba(255, 255, 255, 0.8); }
.sg-navy figcaption b, .sg-cobalt figcaption b { color: #8fbaff; }
.sg-navy .sg-frame, .sg-cobalt .sg-frame { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7); }
/* ikili ve story üçlüsü */
.sg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 60px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.sg-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 60px; padding-bottom: 60px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.sg-stories figure:nth-child(2) { transform: translateY(48px); }
.js .sg-stories figure.cs-rv.is-in:nth-child(2) { transform: translateY(48px); }
.sg-quote { padding-top: 110px; padding-bottom: 110px; font: 800 clamp(30px, 3.6vw, 52px)/1.08 var(--display); letter-spacing: -0.04em; color: #121b74; max-width: calc(var(--wrap) + var(--gutter) * 2); }
@media (max-width: 960px) {
  .sg-stories { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sg-stories figure { scroll-snap-align: start; }
  .sg-stories figure:nth-child(2), .js .sg-stories figure.cs-rv.is-in:nth-child(2) { transform: none; }
}
@media (max-width: 640px) {
  .sg-one { padding: 56px var(--gutter) 28px; }
  .sg-duo { grid-template-columns: 1fr; padding-top: 40px; }
  .sg-quote { padding-top: 70px; padding-bottom: 70px; }
  .sg-frame { border-radius: 16px; }
  .sg { padding-bottom: 90px; }
}

/* ---------- Dinosoft: Netio vaka düzeni + Dinosoft teması (mor zemin, turuncu vurgu) ---------- */
.cs--dn { --b-ink: #2f007a; --b-deep: #220058; --b-green: #4d0fac; --b-lime: #fc5000; --b-on: #fff; --b-cream: #f4f0fb; --b-glow: 252, 80, 0; --b-ink-rgb: 47, 0, 122; --b-mid-rgb: 77, 15, 172; --b-strip-i: #fc5000; }
.cs--dn .cs-title em { color: #fc5000; }
.cs--dn .cs-btn-lime { color: #fff; }
.dn-stage { background: radial-gradient(55% 55% at 50% 25%, rgba(252, 80, 0, 0.32), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(120, 60, 255, 0.4), transparent 70%), #2f007a; }
.dn-stage .cs-float--a { background: #fc5000; color: #fff; }
/* reels şeridi */
.dn-films { padding: 150px 0 160px; background: #f4f0fb; }
.dn-films__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.dn-films__head .cs-sechead { margin-bottom: 0; }
.dn-films__nav { display: flex; gap: 10px; flex: none; }
.dn-films__nav button { width: 52px; height: 52px; border: 0; border-radius: 50%; background: #fff; color: #2f007a; font: 700 20px/1 var(--display); box-shadow: 0 10px 24px -12px rgba(47, 0, 122, 0.45); cursor: pointer; transition: transform 0.3s var(--spring), background 0.2s, color 0.2s; }
.dn-films__nav button:hover { transform: scale(1.08); background: #fc5000; color: #fff; }
.dn-films__row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 22vw, 300px); gap: 22px; margin-top: 48px; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) 70px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); scrollbar-width: none; }
.dn-films__row::-webkit-scrollbar { display: none; }
.dn-film { margin: 0; scroll-snap-align: start; }
.dn-film:nth-child(even) { transform: translateY(50px); }
.js .dn-film.cs-rv.is-in:nth-child(even) { transform: translateY(50px); }
.dn-film__ph { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #2f007a; box-shadow: 0 40px 60px -34px rgba(47, 0, 122, 0.6); cursor: pointer; }
.dn-film__ph video, .dn-anim__ph video, .dn-tf__ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-film__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; background: #fc5000; color: #fff; font: 700 12px/1 var(--display); }
.dn-film__badge svg { width: 13px; }
.dn-film__snd { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #2f007a; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.3s var(--spring); }
.dn-film__snd:hover { transform: scale(1.08); }
.dn-film__snd svg { width: 22px; }
.dn-film__snd .dn-on { display: none; }
.dn-film__snd.is-on { background: #fc5000; color: #fff; }
.dn-film__snd.is-on .dn-on { display: inline; } .dn-film__snd.is-on .dn-off { display: none; }
.dn-film figcaption { margin-top: 16px; }
.dn-film figcaption b { display: block; font: 800 20px/1.15 var(--display); letter-spacing: -0.02em; }
.dn-film figcaption span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
/* animasyon */
.dn-anim { padding: 0 12px; }
.dn-anim__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: center; max-width: none; margin: -40px 0 0; padding: 110px max(40px, calc((100% - var(--wrap)) / 2 + 40px)); border-radius: var(--r); background: radial-gradient(50% 60% at 18% 30%, rgba(252, 80, 0, 0.45), transparent 70%), radial-gradient(60% 70% at 100% 100%, rgba(140, 70, 255, 0.5), transparent 70%), #2f007a; color: #fff; overflow: hidden; }
.dn-anim__ph { position: relative; justify-self: center; width: min(360px, 100%); aspect-ratio: 9 / 16; border-radius: 40px; overflow: hidden; background: #15002f; box-shadow: 0 0 0 10px #15002f, 0 0 0 11px rgba(255, 255, 255, 0.12), 0 60px 90px -40px rgba(0, 0, 0, 0.7); cursor: pointer; transform: rotate(-3deg); }
.dn-anim__text .cs-kicker { color: #ffb08a; }
.dn-anim__text h2 { margin: 16px 0 22px; font: 800 clamp(40px, 5vw, 72px)/0.98 var(--display); letter-spacing: -0.05em; }
.dn-anim__text h2 em { font-style: normal; color: #fc5000; }
.dn-anim__text p { max-width: 520px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.8); }
.dn-anim__beats { display: grid; gap: 0; max-width: 520px; margin: 34px 0 0; padding: 0; list-style: none; }
.dn-anim__beats li { display: flex; gap: 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); font: 600 17px/1.3 var(--display); }
.dn-anim__beats b { flex: none; width: 56px; color: #fc5000; font-variant-numeric: tabular-nums; }
/* post duvarı */
.dn-posts { padding: 160px 0 150px; overflow: hidden; }
.dn-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; height: 820px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.dn-wall__col { overflow: hidden; }
.dn-wall__track { display: grid; gap: 20px; animation: dn-up var(--dur) linear infinite; }
.dn-wall__col.is-down .dn-wall__track { animation-direction: reverse; }
.dn-wall:hover .dn-wall__track { animation-play-state: paused; }
.dn-wall__track img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 50px -34px rgba(47, 0, 122, 0.6); }
@keyframes dn-up { to { transform: translateY(calc(-50% - 10px)); } }
/* TechForward */
.dn-tf { padding: 0 0 160px; }
.dn-tf__grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: var(--cs-wide); margin: 0 auto; }
.dn-tf__invite { margin: 0; transform: rotate(-3deg); }
.dn-tf__invite img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 40px 60px -34px rgba(47, 0, 122, 0.6); }
.dn-tf__invite figcaption, .dn-tf__cap b { display: block; margin-top: 16px; font: 800 18px/1.2 var(--display); letter-spacing: -0.02em; }
.dn-tf__ph { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #2f007a; box-shadow: 0 50px 80px -40px rgba(47, 0, 122, 0.65); cursor: pointer; }
.dn-tf__cap { margin: 0; }
.dn-tf__cap span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
/* basılı */
.dn-print__note { font: 600 15px/1 var(--display); color: var(--muted); }
.dn-print__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: stretch; }
.dn-book { background: radial-gradient(60% 70% at 50% 40%, #fff 0%, #ece4f8 100%); }
.dn-book .rm-book__nav { color: #fc5000; }
.dn-book .rm-leaf__face { box-shadow: 0 20px 40px -18px rgba(47, 0, 122, 0.4); }
.dn-rollup { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin: 0; padding: 30px 36px 0; border-radius: var(--r); background: #f4f0fb; }
.dn-rollup__sheet { width: 250px; aspect-ratio: 600 / 1428; overflow: hidden; border-radius: 4px 4px 0 0; box-shadow: 0 30px 40px -24px rgba(47, 0, 122, 0.5); }
.dn-rollup__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dn-rollup__base { display: block; width: 290px; max-width: 120%; height: 12px; border-radius: 6px; background: linear-gradient(#cfc8da, #a79fb5); }
.dn-rollup figcaption { padding: 14px 0 18px; font: 800 16px/1 var(--display); }
@media (max-width: 1100px) {
  .dn-anim__in { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 80px 32px; }
  .dn-anim__ph { width: min(300px, 80%); }
  .dn-tf__grid { grid-template-columns: minmax(0, 1fr); }
  .dn-tf__invite { width: min(320px, 70%); justify-self: center; }
  .dn-print__grid { grid-template-columns: minmax(0, 1fr); }
  .dn-rollup { padding: 28px 0 0; }
  .dn-rollup__sheet { width: min(220px, 50%); }
  .dn-rollup__base { width: min(260px, 60%); }
}
@media (max-width: 640px) {
  .dn-films { padding: 90px 0 100px; }
  .dn-films__nav { display: none; }
  .dn-films__row { grid-auto-columns: 68%; gap: 14px; margin-top: 32px; padding-bottom: 40px; }
  .dn-film:nth-child(even), .js .dn-film.cs-rv.is-in:nth-child(even) { transform: translateY(24px); }
  .dn-anim { padding: 0 8px; }
  .dn-anim__in { padding: 64px 22px; border-radius: 28px; }
  .dn-anim__beats li { font-size: 15px; }
  .dn-posts { padding: 100px 0 90px; }
  .dn-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: 620px; }
  .dn-wall__col:nth-child(n + 3) { display: none; }
  .dn-wall__track { gap: 12px; }
  .dn-wall__track img { border-radius: 12px; }
  @keyframes dn-up { to { transform: translateY(calc(-50% - 6px)); } }
  .dn-tf { padding-bottom: 100px; }
  .dn-tf__ph { border-radius: 18px; }
}
/* proje hikâyesi: ihtiyaç / çözüm, yaklaşım, sonuç */
.dn-hint { margin-top: 20px !important; font: 600 14px/1 var(--display) !important; color: var(--muted) !important; }
.dn-appr { padding-bottom: 150px; }
.dn-appr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.dn-appr__grid li { padding: 30px 28px 32px; border-radius: 24px; background: #f4f0fb; }
.dn-appr__grid li:nth-child(2) { background: #2f007a; color: #fff; }
.dn-appr__grid li:nth-child(3) { background: #fc5000; color: #fff; }
.dn-appr__grid span { font: 800 15px/1 var(--display); opacity: 0.6; }
.dn-appr__grid h3 { margin: 40px 0 12px; font: 800 26px/1.1 var(--display); letter-spacing: -0.03em; }
.dn-appr__grid p { font-size: 16px; line-height: 24px; opacity: 0.85; }
.dn-result { max-width: 1060px; margin: 0 0 90px; }
.dn-result h2 { margin: 16px 0 18px; font: 800 clamp(34px, 4vw, 56px)/1.02 var(--display); letter-spacing: -0.045em; }
.dn-result p { font-size: 19px; line-height: 29px; color: var(--ink-2); }
@media (max-width: 900px) {
  .dn-appr__grid { grid-template-columns: minmax(0, 1fr); }
  .dn-appr__grid h3 { margin-top: 22px; }
}
@media (max-width: 640px) {
  .dn-appr { padding-bottom: 100px; }
  .dn-result { margin-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .dn-wall__track { animation: none; } }

/* ---------- Lizgo Mobil Uygulama: Netio vaka düzeni + Lizgo teması ---------- */
.cs--lzm { --b-ink: #1e4a4a; --b-deep: #163a3a; --b-green: #2a6060; --b-lime: #8fd21f; --b-on: #1e4a4a; --b-cream: #f2f6f2; --b-glow: 143, 210, 31; --b-ink-rgb: 30, 74, 74; --b-mid-rgb: 42, 96, 96; --b-strip-i: #1e4a4a; }
.cs--lzm .cs-title em { color: #8fd21f; }
.lm-phone { position: relative; display: block; width: 280px; aspect-ratio: 640 / 1387; border-radius: 44px; overflow: hidden; background: #0d1414; box-shadow: 0 50px 90px -40px rgba(10, 30, 30, 0.6); }
.lm-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lm-hero { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 720px; margin: 20px 12px 0; padding-top: 60px; border-radius: var(--r); background: radial-gradient(55% 60% at 50% 40%, rgba(143, 210, 31, 0.4), transparent 70%), linear-gradient(160deg, #1e4a4a, #163a3a); overflow: hidden; }
.lm-hero .lm-phone { flex: none; }
.lm-phone--l, .lm-phone--r { width: 250px; margin-bottom: -60px; opacity: 0.9; }
.lm-phone--l { transform: translateX(40px) rotate(-8deg); } .lm-phone--r { transform: translateX(-40px) rotate(8deg); }
.lm-phone--c { position: relative; z-index: 2; width: 300px; margin-bottom: -40px; }
.lm-phone--c img { opacity: 0; transition: opacity 0.7s ease, transform 0.9s var(--ease-expo); transform: scale(1.03); }
.lm-phone--c img.is-on { opacity: 1; transform: none; }
.lm-float { position: absolute; z-index: 3; padding: 12px 16px; border-radius: 999px; background: #fff; color: #1e4a4a; font: 600 15px/1 var(--display); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); animation: lm-bob 4s ease-in-out infinite; }
.lm-float b { color: #8fd21f; }
.lm-float--a { left: 8%; top: 18%; } .lm-float--b { right: 8%; top: 34%; background: #8fd21f; animation-delay: -2s; }
@keyframes lm-bob { 50% { transform: translateY(-10px); } }
.lm-flows { padding: 140px 0 60px; }
.lm-tabs { display: inline-flex; gap: 6px; margin-top: 28px; padding: 6px; border-radius: 999px; background: var(--gray); }
.lm-tabs button { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; font: 600 16px/1 var(--display); color: var(--ink-2); cursor: pointer; transition: background 0.3s, color 0.3s; }
.lm-tabs button.is-on { background: #1e4a4a; color: #fff; }
.lm-rail { display: none; gap: 28px; margin-top: 40px; padding: 10px max(var(--gutter), calc((100vw - var(--cs-wide, 1320px)) / 2)) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lm-rail.is-on { display: flex; }
.lm-step { flex: none; width: 280px; margin: 0; scroll-snap-align: start; opacity: 0; transform: translateY(20px); }
.lm-rail.is-on .lm-step { animation: lm-in 0.7s var(--ease-expo) both; animation-delay: calc(var(--j) * 0.1s); }
@keyframes lm-in { to { opacity: 1; transform: none; } }
.lm-step .lm-phone { width: 100%; box-shadow: 0 30px 60px -36px rgba(10, 30, 30, 0.6); }
.lm-step figcaption { margin-top: 18px; }
.lm-step figcaption b { display: block; font: 700 18px/1.2 var(--display); letter-spacing: -0.02em; }
.lm-step figcaption span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.lm-dec { padding-top: 80px; padding-bottom: 120px; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); }
.lm-dec__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lm-dec__card { padding: 28px 24px; border-radius: 28px; background: #f2f6f2; }
.lm-dec__card i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; font-style: normal; font-size: 22px; }
.lm-dec__card h3 { margin-top: 40px; font: 700 22px/1.1 var(--display); letter-spacing: -0.03em; color: #1e4a4a; }
.lm-dec__card p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lm-wall { overflow: hidden; padding: 40px 0 140px; }
.lm-wall__track { display: flex; gap: 22px; width: max-content; animation: lm-wall 50s linear infinite; }
.lm-wall .lm-phone { width: 220px; border-radius: 34px; }
.lm-wall .lm-phone:nth-child(even) { transform: translateY(40px); }
@keyframes lm-wall { to { transform: translateX(-50%); } }
@media (max-width: 960px) {
  .lm-hero { height: 560px; }
  .lm-phone--l, .lm-phone--r { width: 190px; } .lm-phone--c { width: 230px; }
  .lm-dec__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lm-hero { height: 480px; margin: 20px 8px 0; }
  .lm-phone--l, .lm-phone--r { display: none; } .lm-phone--c { width: 220px; }
  .lm-float--a { left: 4%; top: 6%; } .lm-float--b { right: 4%; top: auto; bottom: 30%; }
  .lm-step { width: 230px; }
  .lm-dec__grid { grid-template-columns: minmax(0, 1fr); }
  .lm-tabs button { padding: 0 12px; font-size: 14px; }
}

/* ---------- De Jure: Netio vaka düzeni + De Jure teması (lacivert, bronz, taş) ---------- */
.cs--dj { --b-ink: #303849; --b-deep: #262c3a; --b-green: #736048; --b-lime: #c9ae8a; --b-on: #303849; --b-cream: #f5f2ee; --b-glow: 201, 174, 138; --b-ink-rgb: 48, 56, 73; --b-mid-rgb: 115, 96, 72; --b-strip-i: #303849; --dj-n: #303849; --dj-b: #736048; --dj-s: #cac4be; --dj-p: #f5f2ee; }
.cs--dj .cs-title em { color: #9c815f; }
/* sahne: tokmak vurur */
.dj-stage { display: grid; place-items: center; min-height: 620px; background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.55), transparent 70%), var(--dj-s); }
.dj-build { position: relative; width: min(640px, 80%); }
.dj-logo { display: block; width: 100%; color: var(--dj-n); overflow: visible; }
.dj-logo .dj-de { animation: dj-de 7s var(--ease-expo) infinite; }
.dj-logo .dj-jure { animation: dj-jure 7s var(--ease-expo) infinite; }
.dj-logo .dj-gavel { transform-box: fill-box; transform-origin: 100% 100%; animation: dj-gavel 7s infinite; }
.dj-logo .dj-tag { animation: dj-tag 7s ease infinite; }
@keyframes dj-de { 0% { opacity: 0; transform: translateX(-60px); } 8%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes dj-jure { 0%, 6% { opacity: 0; transform: translateY(60px); } 15%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes dj-gavel {
  0%, 15% { opacity: 0; transform: translate(60px, -120px) rotate(34deg); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  23% { opacity: 1; transform: translate(0, -10px) rotate(30deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.5); }
  28% { transform: rotate(-3deg); animation-timing-function: ease-out; }
  31% { transform: rotate(5deg); }
  34%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes dj-tag { 0%, 34% { opacity: 0; transform: translateY(14px); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.dj-impact { position: absolute; left: 49%; top: 25%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 3px solid var(--dj-b); opacity: 0; animation: dj-impact 7s ease-out infinite; }
@keyframes dj-impact { 0%, 27.5% { opacity: 0; transform: scale(0.2); } 28% { opacity: 1; transform: scale(0.4); } 40%, 100% { opacity: 0; transform: scale(9); } }
.dj-stage.is-shake, .dj-stage { animation: dj-shake 7s infinite; }
@keyframes dj-shake { 0%, 27.8% { translate: 0 0; } 28.4% { translate: 0 4px; } 29% { translate: 0 -2px; } 29.6%, 100% { translate: 0 0; } }
/* logo arayışı */
.dj-explore { padding-top: 140px; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); }
.dj-explore__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dj-try { position: relative; margin: 0; }
.dj-try img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; filter: grayscale(0.4) opacity(0.75); transition: filter 0.4s; }
.dj-try.is-pick img { filter: none; box-shadow: 0 0 0 3px var(--dj-b), 0 30px 50px -30px rgba(48, 56, 73, 0.5); }
.dj-try:hover img { filter: none; }
.dj-try figcaption { margin-top: 14px; } .dj-try figcaption b { display: block; font: 700 18px/1.2 var(--display); } .dj-try figcaption span { font-size: 14px; color: var(--ink-2); }
.dj-try em { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: 99px; background: var(--dj-b); color: #fff; font: 700 13px/1 var(--display); font-style: normal; }
/* kimlik sistemi */
.dj-system { padding: 140px 0 120px; }
.dj-system__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); margin: 0 auto; }
.dj-anat { position: relative; grid-row: span 2; display: grid; place-items: center; min-height: 460px; padding: 70px 40px; border-radius: 28px; background: var(--dj-p); }
.dj-anat__logo { width: 82%; }
.dj-anat__pin { position: absolute; display: grid; gap: 3px; max-width: 200px; font-size: 13px; color: var(--ink-2); }
.dj-anat__pin b { font: 700 15px/1.2 var(--display); color: var(--dj-n); }
.dj-anat__pin i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--dj-b); box-shadow: 0 0 0 5px rgba(115, 96, 72, 0.2); }
.dj-anat__pin--a { left: 52%; top: 22px; padding-left: 24px; } .dj-anat__pin--a i { left: 0; top: 2px; }
.dj-anat__pin--b { right: 24px; bottom: 30px; text-align: right; padding-right: 24px; } .dj-anat__pin--b i { right: 0; top: 2px; }
.dj-anat__pin--c { left: 24px; bottom: 30px; padding-left: 24px; } .dj-anat__pin--c i { left: 0; top: 2px; }
.dj-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dj-swatch { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 16px; border-radius: 22px; background: var(--sw); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.dj-swatch b { font: 700 17px/1 var(--display); } .dj-swatch span { margin-top: 8px; font: 600 13px/1 var(--display); } .dj-swatch em { margin-top: 4px; font-size: 11px; font-style: normal; opacity: 0.7; }
.dj-type { display: flex; gap: 20px; align-items: center; padding: 26px; border-radius: 22px; background: var(--dj-n); color: #fff; }
.dj-type__aa { font: 600 84px/1 var(--display); color: #c9ae8a; letter-spacing: -0.04em; }
.dj-type b { font: 700 17px/1 var(--display); } .dj-type p { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.dj-type__abc { display: block; margin-top: 10px; overflow-wrap: anywhere; font: 500 12px/1.6 var(--display); color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; }
.dj-lang { grid-column: span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 26px; border-radius: 22px; background: var(--gray); }
.dj-lang span { padding: 10px 16px; border-radius: 99px; background: #fff; font: 600 15px/1 var(--display); color: var(--dj-n); }
.dj-lang p { margin-left: auto; font-size: 14px; color: var(--ink-2); }
/* uygulamalar */
.dj-apps { padding-bottom: 120px; max-width: calc(var(--cs-wide, 1320px) + var(--gutter) * 2); }
.dj-label { position: absolute; left: 0; bottom: -30px; font: 600 13px/1 var(--display); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.dj-desk { position: relative; height: 640px; border-radius: var(--r); background: radial-gradient(80% 70% at 30% 20%, #e9e4dd, #cac4be); overflow: hidden; }
.dj-desk > * { position: absolute; }
.dj-card { left: 10%; top: 8%; width: 340px; aspect-ratio: 85 / 55; perspective: 1200px; z-index: 3; }
.dj-card__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotate(-6deg); transition: transform 0.9s var(--ease-expo); }
.dj-card:hover .dj-card__in { transform: rotate(-6deg) rotateY(180deg); }
.dj-card__f, .dj-card__b { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; box-shadow: 0 24px 40px -20px rgba(30, 30, 40, 0.5); }
.dj-card__f { display: grid; place-items: center; background: var(--dj-p); } .dj-card__logo { width: 62%; }
.dj-card__b { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; padding: 22px; background: var(--dj-n); color: #fff; transform: rotateY(180deg); }
.dj-card__mark { position: absolute; left: 22px; top: 20px; width: 34%; }
.dj-card__name { display: grid; font-size: 11px; color: #c9ae8a; } .dj-card__name b { font: 700 15px/1.3 var(--display); color: #fff; }
.dj-card__info { font-size: 10px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); text-align: right; }
.dj-card:not(:hover) .dj-card__in { animation: dj-flip 8s ease-in-out infinite; }
@keyframes dj-flip { 0%, 40% { transform: rotate(-6deg); } 50%, 90% { transform: rotate(-6deg) rotateY(180deg); } 100% { transform: rotate(-6deg); } }
.dj-letter { right: 10%; top: 6%; width: 330px; aspect-ratio: 210 / 297; padding: 26px 26px 20px; background: #fff; box-shadow: 0 30px 50px -26px rgba(30, 30, 40, 0.45); transform: rotate(4deg); z-index: 2; }
.dj-letter__logo { width: 42%; }
.dj-letter__date { display: block; margin-top: 30px; text-align: right; font-size: 9px; color: #888; }
.dj-letter__lines { display: grid; gap: 9px; margin-top: 22px; } .dj-letter__lines i { height: 5px; width: var(--w); border-radius: 3px; background: #e5e1db; }
.dj-letter__sign { display: grid; margin-top: 26px; font-size: 8px; color: #888; } .dj-letter__sign b { font: 700 10px/1.3 var(--display); color: var(--dj-n); }
.dj-letter__foot { position: absolute; left: 26px; right: 26px; bottom: 16px; padding-top: 8px; border-top: 2px solid var(--dj-b); font-size: 8px; color: #888; }
.dj-letter .dj-label { bottom: -26px; }
.dj-env { left: 30%; bottom: 10%; display: flex; align-items: center; gap: 20px; width: 380px; aspect-ratio: 220 / 110; padding: 22px 26px; background: var(--dj-p); box-shadow: 0 24px 40px -22px rgba(30, 30, 40, 0.45); transform: rotate(-2deg); z-index: 1; }
.dj-env__mark { width: 34%; } .dj-env span { margin-left: auto; font-size: 11px; line-height: 1.5; color: var(--dj-n); text-align: right; }
.dj-env__strip { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--dj-n) 60%, var(--dj-b) 60%); }
.dj-folder { left: 4%; bottom: -6%; display: grid; place-items: center; width: 250px; aspect-ratio: 230 / 310; background: var(--dj-n); box-shadow: 0 30px 50px -26px rgba(30, 30, 40, 0.55); transform: rotate(-10deg); z-index: 0; }
.dj-folder__logo { width: 70%; }
.dj-apps__row { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr; gap: 16px; margin-top: 60px; }
.dj-apps__row figure { margin: 0; } .dj-apps__row figcaption { margin-top: 12px; font: 600 14px/1 var(--display); color: var(--ink-2); }
.dj-plate__wall { display: grid; place-items: center; height: 320px; border-radius: 28px; background: repeating-linear-gradient(90deg, #ebe7e1 0 2px, #e2ddd6 2px 80px); }
.dj-plate__brass { display: grid; place-items: center; width: 70%; aspect-ratio: 3 / 2; padding: 20px; border-radius: 6px; background: linear-gradient(135deg, #e9d6b2, #c6a777 45%, #f1e2c2 55%, #b8955f); box-shadow: 0 20px 30px -16px rgba(60, 40, 10, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.dj-plate__brass img { width: 82%; filter: brightness(0.75); mix-blend-mode: multiply; }
.dj-mail__win { height: 320px; padding: 0 0 20px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.dj-mail__bar { display: flex; gap: 6px; padding: 14px 18px; background: var(--gray); } .dj-mail__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d2d8; }
.dj-mail__win p { margin: 40px 30px 0; font-size: 16px; color: var(--ink-2); }
.dj-mail__sig { display: flex; align-items: center; gap: 18px; margin: 20px 30px 0; padding-top: 18px; border-top: 2px solid var(--dj-b); }
.dj-mail__sig img { width: 140px; } .dj-mail__sig span { font-size: 13px; line-height: 1.5; color: var(--ink-2); } .dj-mail__sig b { display: block; font: 700 15px/1.2 var(--display); color: var(--dj-n); }
.dj-social__post { display: flex; flex-direction: column; justify-content: space-between; height: 320px; padding: 26px; border-radius: 28px; background: radial-gradient(70% 60% at 100% 0%, rgba(201, 174, 138, 0.35), transparent 70%), var(--dj-n); color: #fff; }
.dj-social__post img { width: 46%; } .dj-social__post p { font: 700 26px/1.1 var(--display); letter-spacing: -0.03em; } .dj-social__post span { font-size: 12px; color: #c9ae8a; }
@media (max-width: 960px) {
  .dj-explore__row { grid-template-columns: 1fr 1fr; }
  .dj-system__grid { grid-template-columns: minmax(0, 1fr); } .dj-anat { grid-row: auto; } .dj-lang { grid-column: auto; }
  .dj-desk { height: 760px; } .dj-card { left: 6%; top: 6%; width: 280px; } .dj-letter { right: 6%; top: 34%; width: 240px; }
  .dj-env { left: 6%; bottom: 6%; width: 300px; } .dj-folder { display: none; }
  .dj-apps__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dj-stage { min-height: 420px; }
  .dj-colors { grid-template-columns: 1fr 1fr; } .dj-swatch { min-height: 130px; }
  .dj-anat { min-height: 380px; padding: 90px 20px; } .dj-anat__pin { max-width: 140px; font-size: 12px; } .dj-anat__pin--a { left: 40%; }
  .dj-desk { height: 700px; } .dj-card { width: 230px; } .dj-letter { width: 190px; right: 4%; } .dj-env { width: 250px; padding: 14px 16px; }
  .dj-lang p { margin-left: 0; }
}

/* ---------- Taze Çörekçi: Netio vaka düzeni + fırın teması (kahve, karamel, krem) ---------- */
.cs--ck { --b-ink: #4a2a14; --b-deep: #2f190b; --b-green: #6b3d1f; --b-lime: #f0a35e; --b-on: #2a160b; --b-cream: #fbf4ea; --b-glow: 240, 163, 94; --b-ink-rgb: 74, 42, 20; --b-mid-rgb: 107, 61, 31; --b-strip-i: #4a2a14; }
.cs--ck .cs-title em { color: #d9813a; }
.ck-stage { background: radial-gradient(55% 55% at 50% 25%, rgba(240, 163, 94, 0.4), transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(150, 80, 30, 0.5), transparent 70%), #3a1f0e; }
.ck-stage .cs-float--a { background: #f0a35e; color: #2a160b; }
.ck-stage__shot { width: 340px; aspect-ratio: 3 / 2; object-fit: cover; }
.ck-stage__shot--cut { box-shadow: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.45)); }
.ck-stage .fx-stage__post--l { left: calc(50% - 560px); top: 150px; }
.ck-stage .fx-stage__post--r { right: calc(50% - 560px); top: 250px; }
.cs--ck .dn-film__badge { background: #f0a35e; color: #2a160b; }
.cs--ck .dn-film__snd { color: #4a2a14; }
.cs--ck .dn-film__snd.is-on { background: #f0a35e; color: #2a160b; }
.cs--ck .dn-film__ph { background: #3a1f0e; box-shadow: 0 40px 60px -34px rgba(58, 31, 14, 0.6); }
.ck-num { display: inline-block; font: 700 14px/1 var(--display); letter-spacing: 0.02em; color: #d9813a; }
/* mutfak */
.ck-kitchen { padding: 0 12px; }
.ck-kitchen__in { display: grid; grid-template-columns: minmax(0, 1fr) 280px 280px; gap: 28px; align-items: center; max-width: none; padding: 100px max(40px, calc((100% - var(--wrap)) / 2 + 40px)); border-radius: var(--r); background: #fbf4ea; }
.ck-kitchen__text { padding-right: 30px; }
.ck-kitchen__text h2 { margin: 0 0 20px; font: 800 clamp(36px, 4vw, 56px)/1.02 var(--display); letter-spacing: -0.045em; color: #2a160b; }
.ck-kitchen__text p { font-size: 18px; line-height: 28px; color: #6b5444; }
.ck-hint { margin-top: 18px; font: 600 14px/1 var(--display) !important; color: #a08672 !important; }
.ck-reel:nth-of-type(2) { margin-top: 70px; }
/* stüdyo */
.ck-studio { padding-top: 150px; padding-bottom: 150px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.ck-studio .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.ck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ck-shot { margin: 0; cursor: pointer; outline: none; }
.ck-shot__ph { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 70% at 50% 45%, #fffdf9, #f6ede1); transition: transform 0.5s var(--ease-expo), box-shadow 0.5s; }
.ck-shot:hover .ck-shot__ph, .ck-shot:focus-visible .ck-shot__ph { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(58, 31, 14, 0.5); }
.ck-shot__ph img { position: absolute; inset: 6% 6% 10%; width: 88%; height: 84%; object-fit: contain; opacity: 0; filter: drop-shadow(0 14px 14px rgba(74, 42, 20, 0.22)); }
.ck-shot__ph img.is-on { opacity: 1; }
.ck-shot__dots { position: absolute; left: 50%; bottom: 12px; display: flex; gap: 5px; transform: translateX(-50%); }
.ck-shot__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(42, 22, 11, 0.22); transition: background 0.2s, width 0.3s var(--ease-expo); }
.ck-shot__dots i.is-on { width: 16px; border-radius: 3px; background: #d9813a; }
.ck-shot figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.ck-shot figcaption b { font: 800 17px/1 var(--display); letter-spacing: -0.02em; }
.ck-shot figcaption span { font-size: 14px; color: var(--muted); }
/* karşılaştırma */
.ck-ba { padding: 140px 0 150px; background: linear-gradient(#fbf4ea, #fff); }
.ck-ba__frame { position: relative; aspect-ratio: 3 / 2; max-width: var(--cs-wide); margin: 0 auto; border-radius: 28px; overflow: hidden; background: #3a1f0e; box-shadow: 0 60px 90px -50px rgba(58, 31, 14, 0.6); touch-action: pan-y; user-select: none; }
.ck-ba__set { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.ck-ba__set.is-on { opacity: 1; }
.ck-ba__set img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-ba__b { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ck-ba__line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, 0.25); pointer-events: none; }
.ck-ba__line i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #4a2a14; font: 700 22px/1 var(--display); font-style: normal; transform: translate(-50%, -50%); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4); }
.ck-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ck-ba__tag { position: absolute; top: 22px; z-index: 2; height: 36px; padding: 0 16px; display: flex; align-items: center; border-radius: 999px; font: 700 14px/1 var(--display); pointer-events: none; }
.ck-ba__tag--l { left: 22px; background: #f6ede1; color: #4a2a14; }
.ck-ba__tag--r { right: 22px; background: #4a2a14; color: #fbf4ea; }
.ck-ba__thumbs { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.ck-ba__thumbs button { width: 104px; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; opacity: 0.55; outline: 3px solid transparent; outline-offset: 3px; transition: opacity 0.2s, outline-color 0.2s; }
.ck-ba__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-ba__thumbs button[aria-selected='true'] { opacity: 1; outline-color: #d9813a; }
/* konsept galerisi */
.ck-gal { padding-top: 150px; padding-bottom: 150px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.ck-gal .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.ck-gal__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 16px; }
.ck-gal__it { margin: 0; border-radius: 20px; overflow: hidden; grid-column: span 2; grid-row: span 2; }
.ck-gal__it img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-expo); }
.ck-gal__it:hover img { transform: scale(1.04); }
.ck-gal__it--1 { grid-column: span 4; grid-row: span 3; }
.ck-gal__it--2 { grid-row: span 3; }
.ck-gal__it--6, .ck-gal__it--7 { grid-column: span 3; }
@media (max-width: 1100px) {
  .ck-kitchen__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 80px 32px; }
  .ck-kitchen__text { grid-column: 1 / -1; padding-right: 0; }
  .ck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-stage__shot { width: 280px; }
}
@media (max-width: 640px) {
  .ck-kitchen { padding: 0 8px; }
  .ck-kitchen__in { gap: 14px; padding: 60px 18px; border-radius: 28px; }
  .ck-reel:nth-of-type(2) { margin-top: 40px; }
  .ck-studio, .ck-gal { padding-top: 100px; padding-bottom: 100px; }
  .ck-grid { gap: 12px; }
  .ck-shot__ph { border-radius: 14px; }
  .ck-shot figcaption b { font-size: 15px; }
  .ck-ba { padding: 90px 0 100px; }
  .ck-ba__frame { border-radius: 18px; aspect-ratio: 4 / 5; }
  .ck-ba__tag { top: 14px; height: 30px; padding: 0 12px; font-size: 12px; }
  .ck-ba__tag--l { left: 14px; } .ck-ba__tag--r { right: 14px; }
  .ck-ba__line i { width: 46px; height: 46px; font-size: 18px; }
  .ck-ba__thumbs button { width: 72px; }
  .ck-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 10px; }
  .ck-gal__it, .ck-gal__it--2, .ck-gal__it--6 { grid-column: span 1; grid-row: span 1; }
  .ck-gal__it--1, .ck-gal__it--4, .ck-gal__it--7 { grid-column: span 2; grid-row: span 2; }
  .ck-gal__it { border-radius: 14px; }
}

/* ---------- DHY-DER: Netio vaka düzeni + derneğin magenta ve mürdüm teması ---------- */
.cs--dh { --b-ink: #5a2848; --b-deep: #3d1631; --b-green: #7d3468; --b-lime: #f2b3da; --b-on: #3d1631; --b-cream: #fbf1f7; --b-glow: 214, 92, 170; --b-ink-rgb: 90, 40, 72; --b-mid-rgb: 125, 52, 104; --b-strip-i: #5a2848; }
.cs--dh .cs-title em { color: #b0408e; }
.dh-stage { background: radial-gradient(55% 55% at 50% 25%, rgba(242, 179, 218, 0.45), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(176, 64, 142, 0.55), transparent 70%), #4a1d3c; }
.dh-stage .cs-float--a { background: #f2b3da; color: #3d1631; }
.dh-phone__screen { background: #fff; }
.dh-ig { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 74px; padding: 26px 22px 0; background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0)); font: 700 15px/1 var(--display); color: #111; }
.dh-ig span { font: 600 12px/1 var(--display); color: #888; }
.dh-feed { position: absolute; inset: 0; overflow: hidden; }
.dh-feed__track { display: grid; gap: 10px; padding-top: 74px; animation: dh-feed 70s linear infinite; }
.dh-feed__post { background: #fff; }
.dh-feed__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font: 700 12px/1 var(--display); }
.dh-feed__head i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #b0408e, #f2b3da); }
.dh-feed__post img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dh-feed__acts { display: flex; gap: 14px; padding: 8px 12px 4px; font-size: 16px; color: #222; }
@keyframes dh-feed { to { transform: translateY(-50%); } }
/* seçki */
.dh-best { padding: 150px 0 140px; background: #fbf1f7; }
.dh-best__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-bottom: 60px; }
.dh-best__grid img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 50px -34px rgba(90, 40, 72, 0.6); transition: transform 0.6s var(--ease-expo); }
.dh-best__grid img:nth-child(4n + 2), .dh-best__grid img:nth-child(4n + 4), .js .dh-best__grid img.cs-rv.is-in:nth-child(4n + 2), .js .dh-best__grid img.cs-rv.is-in:nth-child(4n + 4) { transform: translateY(60px); }
/* gece */
.dh-night { padding: 0 12px; }
.dh-night__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; max-width: none; margin-top: 12px; padding: 110px max(40px, calc((100% - var(--wrap)) / 2 + 40px)); border-radius: var(--r); background: radial-gradient(50% 60% at 80% 40%, rgba(176, 64, 142, 0.35), transparent 70%), #16090f; color: #fff; overflow: hidden; }
.dh-night__clock { display: inline-block; font: 800 22px/1 var(--display); letter-spacing: 0.04em; color: #f2b3da; font-variant-numeric: tabular-nums; }
.dh-night__text h2 { margin: 18px 0 20px; font: 800 clamp(36px, 4.2vw, 60px)/1.02 var(--display); letter-spacing: -0.045em; }
.dh-night__text p { max-width: 480px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.72); }
.dh-night__posts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dh-night__posts img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8); }
.dh-night__posts img:nth-child(2) { transform: translateY(-40px); }
.js .dh-night__posts img.cs-rv.is-in:nth-child(2) { transform: translateY(-40px); }
/* anatomi */
.dh-anat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; padding-top: 150px; padding-bottom: 150px; }
.dh-anat__post { position: relative; border-radius: 20px; box-shadow: 0 50px 80px -40px rgba(90, 40, 72, 0.55); }
.dh-anat__post img { display: block; width: 100%; height: auto; border-radius: 20px; }
.dh-pin { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 0; border-radius: 50%; background: #3d1631; color: #fff; font: 800 14px/1 var(--display); cursor: pointer; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.7), 0 8px 18px -6px rgba(61, 22, 49, 0.6); transition: transform 0.3s var(--spring), background 0.2s; }
.dh-pin::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #b0408e; opacity: 0; }
.dh-pin.is-on { background: #b0408e; transform: scale(1.18); }
.dh-pin.is-on::after { animation: dh-ping 1.4s infinite; }
@keyframes dh-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
.dh-anat__text .cs-sechead { margin-bottom: 30px; }
.dh-anat__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dh-anat__list li { display: flex; gap: 16px; padding: 14px 16px; border-radius: 16px; cursor: default; transition: background 0.25s; }
.dh-anat__list li.is-on { background: #fbf1f7; }
.dh-anat__list li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f2e3ec; color: #5a2848; font: 800 13px/1 var(--display); transition: background 0.25s, color 0.25s; }
.dh-anat__list li.is-on > span { background: #b0408e; color: #fff; }
.dh-anat__list b { display: block; font: 800 18px/1.2 var(--display); letter-spacing: -0.02em; }
.dh-anat__list p { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
/* temalar */
.dh-themes { padding: 140px 0 150px; background: linear-gradient(#fbf1f7, #fff); }
.dh-themes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dh-theme__fan { position: relative; aspect-ratio: 1 / 1.08; margin-bottom: 22px; }
.dh-theme__fan img { position: absolute; left: 50%; top: 8%; width: 66%; height: auto; border-radius: 12px; box-shadow: 0 24px 40px -24px rgba(90, 40, 72, 0.6); transform: translateX(-50%) rotate(calc((var(--k) - 1) * 9deg)) translateX(calc((var(--k) - 1) * 24%)); transform-origin: 50% 110%; transition: transform 0.6s var(--ease-expo); }
.dh-theme__fan img:nth-child(2) { z-index: 2; }
.dh-theme:hover .dh-theme__fan img { transform: translateX(-50%) rotate(calc((var(--k) - 1) * 15deg)) translateX(calc((var(--k) - 1) * 40%)); }
.dh-theme h3 { font: 800 21px/1.15 var(--display); letter-spacing: -0.02em; }
.dh-theme p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
@media (max-width: 1100px) {
  .dh-night__in { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 80px 32px; }
  .dh-anat { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .dh-anat__post { max-width: 520px; }
  .dh-themes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 640px) {
  .dh-best { padding: 90px 0 80px; }
  .dh-best__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 30px; }
  .dh-best__grid img { border-radius: 10px; }
  .dh-best__grid img:nth-child(4n + 2), .dh-best__grid img:nth-child(4n + 4), .js .dh-best__grid img.cs-rv.is-in:nth-child(4n + 2), .js .dh-best__grid img.cs-rv.is-in:nth-child(4n + 4) { transform: none; }
  .dh-best__grid img:nth-child(even), .js .dh-best__grid img.cs-rv.is-in:nth-child(even) { transform: translateY(30px); }
  .dh-night { padding: 0 8px; }
  .dh-night__in { padding: 64px 20px; border-radius: 28px; }
  .dh-night__posts { gap: 8px; }
  .dh-night__posts img { border-radius: 10px; }
  .dh-night__posts img:nth-child(2), .js .dh-night__posts img.cs-rv.is-in:nth-child(2) { transform: translateY(-20px); }
  .dh-anat { padding-top: 100px; padding-bottom: 100px; }
  .dh-pin { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 12px; }
  .dh-themes { padding: 90px 0 100px; }
  .dh-themes__grid { grid-template-columns: minmax(0, 1fr); }
  .dh-theme__fan { aspect-ratio: 1.2; }
  .dh-theme__fan img { width: 48%; }
}
@media (prefers-reduced-motion: reduce) { .dh-feed__track { animation: none; } }

/* DoubleTree · reels şeridi, konuk takımlar */
.dt-films { background: #f1f2f8; }
.cs--dt .dn-film__badge { background: #14163f; color: #fff; }
.cs--dt .dn-film__snd { color: #14163f; }
.cs--dt .dn-film__snd.is-on { background: #a3cd3b; color: #14163f; }
.cs--dt .dn-film__ph { background: #14163f; box-shadow: 0 40px 60px -34px rgba(20, 22, 63, 0.55); }
.cs--dt .dn-films__nav button:hover { background: #14163f; color: #fff; }
.dt-teams { padding: 0 12px; }
.dt-teams__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; align-items: center; max-width: none; margin-top: 12px; padding: 100px max(40px, calc((100% - var(--wrap)) / 2 + 40px)); border-radius: var(--r); background: radial-gradient(50% 70% at 85% 20%, rgba(163, 205, 59, 0.22), transparent 70%), #14163f; color: #fff; }
.dt-teams__text .cs-kicker { color: #a3cd3b; }
.dt-teams__text h2 { margin: 16px 0 20px; font: 800 clamp(36px, 4.2vw, 60px)/1 var(--display); letter-spacing: -0.045em; }
.dt-teams__text p { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.75); }
.dt-teams__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dt-team:nth-child(2) { transform: translateY(-36px); }
.js .dt-team.cs-rv.is-in:nth-child(2) { transform: translateY(-36px); }
.dt-team .dn-film__ph { box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.7); }
.dt-team figcaption span { color: rgba(255, 255, 255, 0.65); }
@media (max-width: 1100px) {
  .dt-teams__in { grid-template-columns: minmax(0, 1fr); padding: 80px 32px; }
}
@media (max-width: 640px) {
  .dt-teams { padding: 0 8px; }
  .dt-teams__in { padding: 60px 18px; border-radius: 28px; gap: 36px; }
  .dt-teams__row { grid-template-columns: repeat(3, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin: 0 -18px; padding: 10px 18px 6px; }
  .dt-team { scroll-snap-align: start; }
  .dt-team:nth-child(2), .js .dt-team.cs-rv.is-in:nth-child(2) { transform: none; }
  }

/* DoubleTree · hikâye: metin ve gece cephesi */
.dt-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 80px; align-items: center; padding-top: 150px; padding-bottom: 150px; }
.dt-intro__text h2 { margin: 18px 0 26px; font: 800 clamp(38px, 4.4vw, 64px)/1 var(--display); letter-spacing: -0.045em; }
.dt-intro__text p { max-width: 560px; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.dt-intro__text p + p { margin-top: 16px; }
.dt-intro__img { position: relative; margin: 0; justify-self: end; width: min(440px, 100%); }
.dt-intro__img > img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 60px 90px -50px rgba(20, 22, 63, 0.7); }
.dt-intro__img::before { content: ''; position: absolute; inset: 8% -10% -6% 14%; z-index: -1; border-radius: 32px; background: linear-gradient(160deg, #e9ecf7, #f6f1e4); }
.dt-intro__badge { position: absolute; left: -40px; bottom: 44px; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 16px; border-radius: 18px; background: #14163f; color: #fff; font: 600 14px/1.2 var(--display); box-shadow: 0 24px 40px -20px rgba(20, 22, 63, 0.7); }
.dt-intro__badge img { height: 34px; width: auto; }
.dt-intro__badge span { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
/* DoubleTree · factsheet bölümü */
.dt-fsm { padding: 0 12px; }
.dt-fsm__in { display: grid; gap: 64px; max-width: none; margin-top: 12px; padding: 110px max(40px, calc((100% - var(--wrap)) / 2 + 40px)) 120px; border-radius: var(--r); background: radial-gradient(70% 80% at 50% 70%, #fffaf0, #ece3d2); overflow: hidden; }
.dt-fsm__text { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 60px; align-items: end; }
.dt-fsm__text .cs-kicker { grid-column: 1 / -1; }
.dt-fsm__text h2 { margin: 0; font: 800 clamp(36px, 4vw, 58px)/1 var(--display); letter-spacing: -0.045em; color: #14163f; }
.dt-fsm__text p { font-size: 17px; line-height: 27px; color: #4b4a5e; }
.dt-fsm__text em { font-style: normal; font-weight: 700; color: #6e9a17; }
.dt-fsm__list { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.dt-fsm__list li { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--display); color: #14163f; }
.dt-fsm__list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a3cd3b; }
@media (max-width: 1100px) {
  .dt-intro { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .dt-intro__img { justify-self: center; }
  .dt-fsm__in { padding: 80px 32px; }
  .dt-fsm__text { grid-template-columns: minmax(0, 1fr); }
  .dt-fsm__list { grid-column: 1; }
}
@media (max-width: 640px) {
  .dt-intro { padding-top: 100px; padding-bottom: 100px; }
  .dt-intro__img { width: 82%; }
  .dt-intro__badge { left: -22px; bottom: 26px; padding: 10px 14px 10px 12px; font-size: 12px; gap: 10px; }
  .dt-intro__badge img { height: 26px; }
  .dt-intro__badge span { padding-left: 10px; }
  .dt-fsm { padding: 0 8px; }
  .dt-fsm__in { padding: 60px 18px 50px; border-radius: 28px; gap: 40px; }
}

/* DoubleTree · fotoğraf çekimleri */
.dt-photos { padding-top: 150px; padding-bottom: 170px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dt-photos__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 60px; align-items: end; margin-bottom: 56px; margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right: max(0px, calc((100% - var(--wrap)) / 2)); }
.dt-photos__head h2 { margin-top: 18px; font: 800 clamp(36px, 4vw, 58px)/1 var(--display); letter-spacing: -0.045em; }
.dt-photos__head p { font-size: 17px; line-height: 27px; color: var(--ink-2); }
.dt-photos__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dt-photo { margin: 0; }
.dt-photo:nth-child(even), .js .dt-photo.cs-rv.is-in:nth-child(even) { transform: translateY(70px); }
.dt-photo:nth-child(3), .js .dt-photo.cs-rv.is-in:nth-child(3) { transform: translateY(24px); }
.dt-photo__ph { aspect-ratio: 2 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 60px -36px rgba(20, 22, 63, 0.55); }
.dt-photo__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-expo); }
.dt-photo:hover .dt-photo__ph img { transform: scale(1.06); }
.dt-photo figcaption { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 700 15px/1 var(--display); letter-spacing: -0.01em; }
.dt-photo figcaption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a3cd3b; }
@media (max-width: 1100px) {
  .dt-photos__head { grid-template-columns: minmax(0, 1fr); }
  .dt-photos__row { grid-template-columns: repeat(5, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding: 0 var(--gutter) 80px; margin: 0 calc(var(--gutter) * -1); }
  .dt-photo { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .dt-photos { padding-top: 100px; padding-bottom: 90px; }
  .dt-photos__head { margin-bottom: 36px; }
  .dt-photos__row { grid-template-columns: repeat(5, 70%); gap: 12px; padding-bottom: 50px; }
  .dt-photo:nth-child(even), .js .dt-photo.cs-rv.is-in:nth-child(even) { transform: translateY(36px); }
  .dt-photo:nth-child(3), .js .dt-photo.cs-rv.is-in:nth-child(3) { transform: none; }
  .dt-photo__ph { border-radius: 16px; }
}

/* DoubleTree · factsheet sunum masası */
.dt-fsv { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: center; }
.dt-fsv__stage { position: relative; display: block; width: 100%; aspect-ratio: 1800 / 1013; padding: 0; border: 0; border-radius: 8px; background: #fff; cursor: zoom-in; perspective: 2000px; box-shadow: 0 2px 4px rgba(20, 22, 63, 0.15), 0 70px 90px -50px rgba(60, 40, 10, 0.6); }
.dt-fsv__stage::before, .dt-fsv__stage::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: #fbfaf6; box-shadow: 0 1px 3px rgba(20, 22, 63, 0.15); }
.dt-fsv__stage::before { transform: translate(14px, 12px) rotate(1deg); }
.dt-fsv__stage::after { transform: translate(7px, 6px) rotate(0.5deg); }
.dt-fsv__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; opacity: 0; transform-origin: 0 50%; transform: translateX(6%) rotateY(-14deg) scale(0.96); transition: opacity 0.5s var(--ease), transform 0.9s var(--ease-expo); }
.dt-fsv__stage img.is-on { z-index: 2; opacity: 1; transform: none; }
.dt-fsv__stage img.is-out { z-index: 1; opacity: 0; transform: translateX(-4%) scale(0.97); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease-expo); }
.dt-fsv__zoom { position: absolute; right: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(20, 22, 63, 0.82); color: #fff; font: 600 13px/1 var(--display); opacity: 0; transform: translateY(-6px); transition: opacity 0.3s, transform 0.4s var(--ease-expo); }
.dt-fsv__zoom svg { width: 17px; height: 17px; }
.dt-fsv__stage:hover .dt-fsv__zoom, .dt-fsv__stage:focus-visible .dt-fsv__zoom { opacity: 1; transform: none; }
.dt-fsv__label { position: absolute; left: 0; top: calc(100% + 22px); font: 700 15px/1 var(--display); color: #14163f; }
.dt-fsv__deck { display: grid; gap: 10px; }
.dt-fsv__card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; overflow: hidden; transition: background 0.3s, transform 0.4s var(--ease-expo); }
.dt-fsv__card img { width: 96px; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; box-shadow: 0 6px 14px -6px rgba(60, 40, 10, 0.45); transition: transform 0.4s var(--ease-expo); }
.dt-fsv__card span { display: grid; gap: 4px; font: 600 14px/1.2 var(--display); color: #6b6658; }
.dt-fsv__card b { font: 700 11px/1 var(--display); letter-spacing: 0.06em; color: #a39d8c; }
.dt-fsv__card:hover { background: rgba(255, 255, 255, 0.5); }
.dt-fsv__card:hover img { transform: rotate(-3deg) scale(1.05); }
.dt-fsv__card[aria-selected='true'] { background: #fff; transform: translateX(-6px); box-shadow: 0 14px 30px -18px rgba(60, 40, 10, 0.5); }
.dt-fsv__card[aria-selected='true'] span { color: #14163f; }
.dt-fsv__card[aria-selected='true'] b { color: #6e9a17; }
.dt-fsv__prog { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; border-radius: 2px; background: #a3cd3b; transform: scaleX(0); transform-origin: 0 50%; }
.dt-fsv.is-auto .dt-fsv__card[aria-selected='true'] .dt-fsv__prog { animation: dt-prog var(--fsv-t, 4s) linear forwards; }
@keyframes dt-prog { to { transform: scaleX(1); } }
.js .dt-fsv.cs-rv .dt-fsv__card { opacity: 0; transform: translateX(20px); }
.js .dt-fsv.cs-rv.is-in .dt-fsv__card { opacity: 1; transform: none; transition: opacity 0.5s var(--ease) calc(0.3s + var(--k) * 0.06s), transform 0.7s var(--ease-expo) calc(0.3s + var(--k) * 0.06s), background 0.3s; }
.js .dt-fsv.cs-rv.is-in .dt-fsv__card[aria-selected='true'] { transform: translateX(-6px); }
/* tam ekran */
.dt-lb { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 60px 90px; background: rgba(12, 13, 38, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dt-lb-in 0.35s var(--ease); }
.dt-lb[hidden] { display: none; }
@keyframes dt-lb-in { from { opacity: 0; } }
.dt-lb__img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); animation: dt-lb-img 0.5s var(--ease-expo); }
@keyframes dt-lb-img { from { opacity: 0; transform: scale(0.94); } }
.dt-lb__close { position: absolute; right: 24px; top: 20px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font: 400 30px/1 var(--display); cursor: pointer; }
.dt-lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: #fff; color: #14163f; font: 700 20px/1 var(--display); cursor: pointer; }
.dt-lb__nav--prev { left: 22px; } .dt-lb__nav--next { right: 22px; }
.dt-lb__cap { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font: 600 14px/1 var(--display); }
@media (max-width: 1100px) {
  .dt-fsv { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .dt-fsv__deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dt-fsv__card { grid-template-columns: minmax(0, 1fr); }
  .dt-fsv__card img { width: 100%; }
  .dt-fsv__card[aria-selected='true'], .js .dt-fsv.cs-rv.is-in .dt-fsv__card[aria-selected='true'] { transform: translateY(-4px); }
}
@media (max-width: 640px) {
  .dt-fsv { gap: 46px; }
  .dt-fsv__stage::before { transform: translate(8px, 7px) rotate(1deg); }
  .dt-fsv__stage::after { transform: translate(4px, 4px) rotate(0.5deg); }
  .dt-fsv__zoom { opacity: 1; transform: none; right: 10px; top: 10px; height: 32px; font-size: 12px; }
  .dt-fsv__label { top: calc(100% + 16px); font-size: 13px; }
  .dt-fsv__deck { gap: 6px; }
  .dt-fsv__card { padding: 5px; border-radius: 10px; }
  .dt-fsv__card span { font-size: 11px; }
  .dt-lb { padding: 20px 12px; }
  .dt-lb__nav { top: auto; bottom: 18px; margin: 0; width: 44px; height: 44px; }
  .dt-lb__nav--prev { left: calc(50% - 110px); } .dt-lb__nav--next { right: calc(50% - 110px); }
  .dt-lb__cap { bottom: 82px; white-space: nowrap; }
}

/* DoubleTree · dijital oda rehberi */
.dt-guide { padding: 0 12px; }
.dt-guide__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; max-width: none; margin-top: 12px; padding: 110px max(40px, calc((100% - var(--wrap)) / 2 + 40px)); border-radius: var(--r); background: radial-gradient(60% 70% at 75% 30%, #34386f, transparent 70%), linear-gradient(180deg, #23275a, #12143a); color: #fff; overflow: hidden; }
.dt-guide__text .cs-kicker { color: #a3cd3b; }
.dt-guide__text h2 { margin: 18px 0 22px; font: 800 clamp(38px, 4.4vw, 62px)/1 var(--display); letter-spacing: -0.045em; }
.dt-guide__text p { max-width: 520px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.72); }
.dt-guide__feats { display: grid; gap: 0; max-width: 520px; margin: 32px 0 0; padding: 0; list-style: none; }
.dt-guide__feats li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.dt-guide__feats b { font: 800 22px/1 var(--display); letter-spacing: -0.02em; color: #a3cd3b; }
.dt-guide__feats span { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.75); }
.dt-guide__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; height: 50px; padding: 0 22px; border-radius: 999px; background: #a3cd3b; color: #14163f; font: 700 16px/1 var(--display); transition: transform 0.3s var(--spring); }
.dt-guide__link:hover { transform: translateY(-2px); }
.dt-guide__stage { position: relative; display: grid; place-items: center; min-height: 720px; padding-bottom: 60px; }
.dt-guide__phone { position: relative; z-index: 2; width: 330px; padding: 11px; border-radius: 52px; background: #0a0b1f; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 70px 100px -40px rgba(0, 0, 0, 0.8); }
.dt-guide__phone::before { content: ''; position: absolute; left: 50%; top: 19px; z-index: 3; width: 86px; height: 24px; margin-left: -46px; border-radius: 20px; background: #0a0b1f; }
.dt-guide__screen { position: relative; aspect-ratio: 390 / 888; border-radius: 42px; overflow: hidden; background: #1c1f4f; }
.dt-guide__bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 4px 26px 0 30px; background: #23275a; color: #fff; font: 600 13px/1 var(--display); }
.dt-guide__bar i { display: flex; gap: 3px; align-items: flex-end; } .dt-guide__bar i b { width: 3px; border-radius: 1px; background: #fff; } .dt-guide__bar i b:nth-child(1) { height: 5px; } .dt-guide__bar i b:nth-child(2) { height: 8px; } .dt-guide__bar i b:nth-child(3) { height: 11px; }
.dt-guide__screen iframe { position: absolute; left: 0; top: 44px; width: 390px; height: 844px; border: 0; transform-origin: 0 0; transform: scale(var(--s, 0.795)); opacity: 0; transition: opacity 0.6s var(--ease); }
.dt-guide__screen.is-live iframe { opacity: 1; }
.dt-guide__poster { position: absolute; inset: 44px 0 0; width: 100%; height: calc(100% - 44px); object-fit: cover; object-position: top; }
.dt-guide__float { position: absolute; z-index: 1; width: 210px; border-radius: 26px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.75); opacity: 0.9; }
.dt-guide__float--a { left: 2%; top: 14%; transform: rotate(-9deg); }
.dt-guide__float--b { right: 2%; bottom: 10%; transform: rotate(8deg); }
.js .dt-guide__stage.cs-rv .dt-guide__float--a { transform: rotate(-2deg) translateX(60px); opacity: 0; }
.js .dt-guide__stage.cs-rv .dt-guide__float--b { transform: rotate(2deg) translateX(-60px); opacity: 0; }
.js .dt-guide__stage.cs-rv.is-in .dt-guide__float { opacity: 0.9; transition: transform 1.1s var(--ease-expo) 0.3s, opacity 0.6s var(--ease) 0.3s; }
.js .dt-guide__stage.cs-rv.is-in .dt-guide__float--a { transform: rotate(-9deg); } .js .dt-guide__stage.cs-rv.is-in .dt-guide__float--b { transform: rotate(8deg); }
.dt-guide__hint { position: absolute; left: 50%; bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 600 13px/1 var(--display); white-space: nowrap; transform: translateX(-50%); }
.dt-guide__hint i { width: 8px; height: 8px; border-radius: 50%; background: #a3cd3b; box-shadow: 0 0 0 0 rgba(163, 205, 59, 0.6); animation: dt-live 1.8s infinite; }
@keyframes dt-live { 70% { box-shadow: 0 0 0 9px rgba(163, 205, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(163, 205, 59, 0); } }
.dt-guide__qr { position: absolute; left: 6%; bottom: 20%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: #fff; color: #14163f; font: 700 13px/1 var(--display); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6); }
.dt-guide__qr svg { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .dt-guide__in { grid-template-columns: minmax(0, 1fr); padding: 80px 32px; }
}
@media (max-width: 640px) {
  .dt-guide { padding: 0 8px; }
  .dt-guide__in { padding: 64px 18px; border-radius: 28px; gap: 40px; }
  .dt-guide__feats li { grid-template-columns: 90px minmax(0, 1fr); }
  .dt-guide__feats b { font-size: 19px; }
  .dt-guide__stage { min-height: 0; padding: 20px 0 56px; }
  .dt-guide__phone { width: min(300px, 82vw); }
  .dt-guide__float { width: 130px; border-radius: 18px; }
  .dt-guide__float--a { left: -8%; top: 8%; } .dt-guide__float--b { right: -8%; bottom: 14%; }
  .dt-guide__qr { display: none; }
}

/* ---------- Daha Yapı: Netio vaka düzeni + Daha yeşili ve turuncusu ---------- */
.cs--dy { --dy-g: #1c4e4a; --dy-o: #f68d1e; --dy-a: #565a5b; --dy-c: #c7c8c6; --b-ink: #1c4e4a; --b-deep: #12352f; --b-green: #2a6560; --b-lime: #f68d1e; --b-on: #fff; --b-cream: #f3f4f2; --b-glow: 246, 141, 30; --b-ink-rgb: 28, 78, 74; --b-mid-rgb: 42, 101, 96; --b-strip-i: #f68d1e; }
.cs--dy .cs-title em { color: var(--dy-o); }
.cs--dy .cs-btn-lime { color: #fff; }
/* logo renkleri: varsayılan yeşil zemin üstü beyaz */
.dy-logo { display: block; width: 100%; height: auto; overflow: visible; }
.dy-logo .dy-mark, .dy-logo .dy-word, .dy-logo .dy-t-a { fill: currentColor; }
.dy-logo .dy-t-o { fill: var(--dy-o); }
.dy-icon { display: block; width: 100%; height: auto; fill: currentColor; }
/* 1 · inşa sahnesi: çizim → ölçü → döküm → imza, hepsi --b (0..1) zaman çizelgesine bağlı */
.dy-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; min-height: 0; padding: 0 9%; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, #215853, #10302b); color: #fff; --b: 0; cursor: pointer; }
.dy-stage__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; mask: radial-gradient(75% 75% at 50% 50%, #000, transparent); -webkit-mask: radial-gradient(75% 75% at 50% 50%, #000, transparent); opacity: calc(1 - clamp(0, (var(--b) - 0.7) * 2.5, 0.6)); }
.dy-stage__logo { position: relative; z-index: 1; width: min(880px, 100%); --p: clamp(0, calc((var(--b) - 0.42) / 0.33), 1); }
.dy-bp, .dy-fill { position: relative; }
.dy-fill, .dy-dims { position: absolute; inset: 0; }
.dy-dims { width: 100%; height: 100%; overflow: visible; color: rgba(246, 141, 30, 0.85); opacity: calc(1 - clamp(0, (var(--b) - 0.8) * 6, 1)); }
.dy-dims__l path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--b) - 0.04) / 0.3, 1)); }
.dy-dims__l path:first-child { stroke-dasharray: 0.006 0.006; stroke-dashoffset: 0; clip-path: inset(0 calc(100% - clamp(0, (var(--b) - 0.02) / 0.25, 1) * 100%) 0 0); }
.dy-dims__t { opacity: clamp(0, calc((var(--b) - 0.25) * 6), 1); letter-spacing: 0.12em; }
/* çizim katmanı: kontur izleri */
.dy-logo--bp .dy-tag { display: none; }
.dy-logo--bp .dy-mark, .dy-logo--bp .dy-word { fill: none; stroke: #f68d1e; stroke-width: 2.2; stroke-linejoin: miter; }
.dy-logo--bp .dy-mark path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--b) - var(--i) * 0.045) / 0.3, 1)); }
.dy-logo--bp .dy-word path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--b) - 0.1 - (var(--i) - 4) * 0.028) / 0.3, 1)); }
.dy-bp { opacity: calc(1 - clamp(0, (var(--b) - 0.74) * 7, 0.92)); }
/* döküm katmanı: dolgu, seviye çizgisiyle alttan yukarı yükselir */
.dy-fill { clip-path: inset(calc(4.8% + (1 - var(--p)) * 70.4%) -5% -10% -5%); }
.dy-logo--fill .dy-tag { clip-path: inset(-20% calc(100% - clamp(0, (var(--b) - 0.76) / 0.22, 1) * 100%) -20% 0); }
.dy-level { position: absolute; left: -3%; right: -3%; top: calc(4.8% + (1 - var(--p)) * 70.4%); height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #f68d1e 12%, #ffc27a 50%, #f68d1e 88%, transparent); box-shadow: 0 0 18px 2px rgba(246, 141, 30, 0.6); opacity: calc(clamp(0, var(--p) * 20, 1) * clamp(0, (1 - var(--p)) * 20, 1)); pointer-events: none; }
.dy-level::after { content: ''; position: absolute; left: 3%; right: 3%; top: 2px; height: 26px; background: linear-gradient(rgba(246, 141, 30, 0.22), transparent); }
.dy-stage__cap { position: absolute; left: 4%; bottom: 7%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); font: 600 13px/1 var(--display); }
.dy-stage__cap b { color: #fff; font-weight: 700; }
.dy-stage__cap i { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.3); }
/* 2 · anatomi */
.dy-anat { padding: 0 12px; }
.dy-anat__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; max-width: none; margin-top: 12px; padding: 110px max(40px, calc((100% - var(--wrap)) / 2 + 40px)); border-radius: var(--r); background: #f3f4f2; }
.dy-anat__text h2 { font: 800 clamp(38px, 4.4vw, 62px)/1 var(--display); letter-spacing: -0.045em; color: var(--dy-g); }
.dy-anat__text p { margin-top: 20px; max-width: 460px; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.dy-anat__keys { display: grid; gap: 8px; margin-top: 30px; }
.dy-anat__keys button { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 0; border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: background 0.25s, transform 0.3s var(--ease-expo); }
.dy-anat__keys b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e6e9e7; color: var(--dy-g); font: 800 22px/1 var(--display); transition: background 0.25s, color 0.25s; }
.dy-anat__keys span { font: 600 15px/1.3 var(--display); color: var(--ink-2); }
.dy-anat__keys button:hover, .dy-anat__keys button[aria-selected='true'] { transform: translateX(6px); }
.dy-anat__keys button[aria-selected='true'] b { background: var(--dy-o); color: #fff; }
.dy-anat__draw { position: relative; aspect-ratio: 1; border-radius: 28px; background: #fff; color: var(--dy-g); box-shadow: 0 40px 70px -50px rgba(28, 78, 74, 0.6); }
.dy-anat__lines, .dy-icon--anat { position: absolute; inset: 10%; width: 80%; height: 80%; }
.dy-anat__lines { color: rgba(246, 141, 30, 0.75); }
.dy-icon--anat .dy-p { transition: fill 0.4s, opacity 0.4s; }
.dy-anat__draw[data-part='d'] .dy-ph, .dy-anat__draw[data-part='h'] .dy-pd, .dy-anat__draw[data-part='gap'] .dy-p { opacity: 0.16; }
.dy-anat__draw[data-part='d'] .dy-pd, .dy-anat__draw[data-part='h'] .dy-ph { fill: var(--dy-o); }
.dy-anat__draw::after { content: ''; position: absolute; left: 50%; top: 13%; bottom: 13%; width: 3%; margin-left: -1.5%; border-radius: 3px; background: var(--dy-o); opacity: 0; transform: scaleY(0.3); transition: opacity 0.4s, transform 0.6s var(--ease-expo); }
.dy-anat__draw[data-part='gap']::after { opacity: 1; transform: none; }
.dy-anat__dim { position: absolute; height: 28px; padding: 0 10px; display: flex; align-items: center; border-radius: 999px; background: var(--dy-g); color: #fff; font: 600 12px/1 var(--display); white-space: nowrap; }
.dy-anat__dim--h { left: 7%; top: 30%; } .dy-anat__dim--v { right: 6%; bottom: 8%; }
/* 3 · renkler */
.dy-colors { padding-top: 150px; padding-bottom: 150px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dy-colors .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.dy-colors__row { display: grid; grid-template-columns: 1.6fr 1.2fr 0.9fr 0.8fr; gap: 14px; height: 440px; }
.dy-swatch { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; border: 0; border-radius: 26px; background: var(--c); color: #fff; text-align: left; cursor: copy; overflow: hidden; transition: flex 0.5s var(--ease-expo), transform 0.4s var(--ease-expo); }
.dy-swatch:nth-child(4) { color: var(--dy-g); }
.dy-swatch:hover { transform: translateY(-6px); }
.dy-swatch__name { font: 800 24px/1.05 var(--display); letter-spacing: -0.03em; }
.dy-swatch__desc { max-width: 260px; font-size: 14px; line-height: 20px; opacity: 0.85; }
.dy-swatch__code b { display: block; font: 800 30px/1 var(--display); letter-spacing: -0.02em; }
.dy-swatch__code em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; opacity: 0.8; }
.dy-swatch__ok { position: absolute; right: 18px; top: 18px; height: 30px; padding: 0 12px; display: flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--dy-g); font: 700 12px/1 var(--display); opacity: 0; transform: translateY(-6px); transition: opacity 0.25s, transform 0.3s var(--ease-expo); }
.dy-swatch.is-copied .dy-swatch__ok { opacity: 1; transform: none; }
/* 4 · tipografi */
.dy-type { padding: 0 12px; }
.dy-type__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: none; padding: 0; }
.dy-type__word, .dy-type__tag { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 420px; padding: 50px; border-radius: var(--r); }
.dy-type__word { background: var(--dy-g); color: #fff; }
.dy-type__word span { display: block; font-family: 'Inter', sans-serif; font-size: clamp(64px, 9vw, 140px); line-height: 0.88; letter-spacing: -0.02em; }
.dy-type__daha { font-weight: 800; } .dy-type__yapi { font-weight: 200; color: rgba(255, 255, 255, 0.85); }
.dy-type__word p, .dy-type__tag p { max-width: 420px; font-size: 16px; line-height: 24px; opacity: 0.8; }
.dy-type__word b { color: var(--dy-o); }
.dy-type__tag { background: #fbf3ea; color: var(--dy-g); }
.dy-type__script { overflow: hidden; }
.dy-tagline { display: block; width: 100%; height: auto; overflow: visible; }
.dy-tagline .dy-t-o { fill: var(--dy-o); } .dy-tagline .dy-t-a { fill: var(--dy-g); }
.dy-logo--tag .dy-mark, .dy-logo--tag .dy-word { display: none; }
.dy-type__script { flex: 1; display: grid; align-content: center; padding: 10px 0; }
.dy-type__script .dy-tag { clip-path: inset(-20% calc(100% - var(--w, 0) * 100%) -20% 0); }
/* 5 · versiyonlar */
.dy-vers { padding-top: 150px; padding-bottom: 150px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dy-vers .cs-sechead { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.dy-vers__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.dy-v { position: relative; display: grid; place-items: center; margin: 0; padding: 60px 40px; border-radius: 26px; grid-column: span 2; min-height: 300px; }
.dy-v--wide { grid-column: span 3; min-height: 340px; }
.dy-v--wide .dy-logo { width: 88%; }
.dy-v .dy-icon { width: 48%; max-width: 180px; }
.dy-v figcaption { position: absolute; left: 20px; bottom: 16px; font: 600 13px/1 var(--display); opacity: 0.7; }
.dy-v--green { background: var(--dy-g); color: #fff; }
.dy-v--white { background: #fff; color: var(--dy-g); box-shadow: inset 0 0 0 1px var(--line); }
.dy-v--orange { background: var(--dy-o); color: #fff; }
.dy-v--gray { background: var(--dy-c); color: var(--dy-g); }
.dy-v__minis { display: grid; gap: 18px; width: 82%; }
.dy-mini .dy-logo { width: 100%; }
.dy-logo--plain .dy-tag { display: none; }
.dy-mini, .dy-card__logo { display: block; aspect-ratio: 1780 / 335; overflow: hidden; }
.dy-mini--g { color: var(--dy-g); } .dy-mini--o { color: var(--dy-o); } .dy-mini--a { color: var(--dy-a); }
/* 6 · uygulamalar */
.dy-apps { padding-bottom: 150px; }
.dy-hoard { position: relative; max-width: calc(var(--cs-wide) + var(--gutter) * 2); margin: 0 auto 60px; padding: 0 var(--gutter); }
.dy-hoard__board { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; aspect-ratio: 3.2; border-radius: 10px; overflow: hidden; background: linear-gradient(100deg, var(--dy-g) 0 48%, #153f3b 48%); color: #fff; box-shadow: 0 50px 70px -40px rgba(28, 78, 74, 0.7); }
.dy-hoard__left { padding: 0 8%; }
.dy-hoard__left p { margin-top: 14px; font: 700 clamp(16px, 1.6vw, 24px)/1.2 var(--display); color: rgba(255, 255, 255, 0.85); }
.dy-hoard__sky { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 3%; padding: 0 8% 0 4%; }
.dy-hoard__sky i { width: var(--w); height: var(--h); background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); border-top: 3px solid var(--dy-o); transform-origin: 50% 100%; }
.js .dy-hoard.cs-rv .dy-hoard__sky i { transform: scaleY(0); }
.js .dy-hoard.cs-rv.is-in .dy-hoard__sky i { transform: none; transition: transform 1.2s var(--ease-expo) calc(0.3s + var(--k) * 0.1s); }
.dy-hoard__crane { position: absolute; right: 10%; top: 10%; width: 34%; height: 4px; background: var(--dy-o); }
.dy-hoard__crane::before { content: ''; position: absolute; left: 70%; top: 0; width: 4px; height: 900%; background: var(--dy-o); }
.dy-hoard__crane::after { content: ''; position: absolute; left: 12%; top: 4px; width: 2px; height: 260%; background: rgba(255, 255, 255, 0.7); animation: dy-hook 4s ease-in-out infinite; }
@keyframes dy-hook { 50% { height: 420%; } }
.dy-hoard__tag { position: absolute; right: 3%; bottom: 8%; padding: 8px 16px; border-radius: 999px; background: var(--dy-o); color: #fff; font: 700 15px/1 var(--display); }
.dy-hoard__tag b { color: var(--dy-g); }
.dy-hoard__posts { display: flex; justify-content: space-around; padding: 0 6%; }
.dy-hoard__posts i { width: 10px; height: 40px; background: linear-gradient(#9aa09f, #6f7574); }
.dy-apps__grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr; gap: 14px; max-width: calc(var(--cs-wide) + var(--gutter) * 2); }
.dy-app { position: relative; margin: 0; display: grid; place-items: center; min-height: 440px; padding: 40px; border-radius: 26px; overflow: hidden; }
.dy-app figcaption { position: absolute; left: 20px; bottom: 16px; height: 30px; padding: 0 12px; display: flex; align-items: center; border-radius: 999px; background: #fff; font: 600 13px/1 var(--display); color: var(--dy-g); }
.dy-app--cards { background: linear-gradient(160deg, #e9ece9, #cfd5d2); perspective: 1200px; }
.dy-card { position: absolute; width: 62%; aspect-ratio: 85 / 55; border-radius: 8px; box-shadow: 0 30px 40px -24px rgba(18, 53, 47, 0.6); transition: transform 0.8s var(--ease-expo); }
.dy-card--back { left: 12%; top: 16%; background: var(--dy-g); color: #fff; display: grid; place-items: center; transform: rotate(-10deg); }
.dy-card--back .dy-icon { width: 24%; }
.dy-card--front { right: 10%; bottom: 18%; padding: 6%; background: #fff; color: var(--dy-g); transform: rotate(6deg); display: flex; flex-direction: column; justify-content: space-between; }
.dy-card--front .dy-card__logo { width: 62%; }
.dy-card__info { display: grid; gap: 3px; font-size: 11px; color: var(--dy-a); }
.dy-card__info b { font: 800 14px/1.1 var(--display); color: var(--dy-g); }
.dy-card__info i { width: 24px; height: 2px; margin: 4px 0; background: var(--dy-o); }
.dy-app--cards:hover .dy-card--back { transform: rotate(-16deg) translate(-8%, -6%); }
.dy-app--cards:hover .dy-card--front { transform: rotate(2deg) translate(4%, 4%); }
.dy-app--helmet { background: radial-gradient(70% 70% at 50% 40%, #2a6560, var(--dy-g)); }
.dy-helmet { position: relative; width: 74%; aspect-ratio: 1.15; }
.dy-helmet__shell { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 22%; display: grid; place-items: center; border-radius: 50% 50% 14% 14% / 70% 70% 14% 14%; background: radial-gradient(60% 50% at 38% 28%, #ffb35c, var(--dy-o) 55%, #c96a0c); box-shadow: inset 0 -14px 0 rgba(0, 0, 0, 0.12), 0 30px 40px -18px rgba(0, 0, 0, 0.6); color: #fff; }
.dy-helmet__shell::before { content: ''; position: absolute; left: 47%; top: 0; width: 6%; height: 92%; border-radius: 6px; background: rgba(0, 0, 0, 0.08); }
.dy-helmet__shell .dy-icon { width: 26%; margin-top: 10%; }
.dy-helmet__brim { position: absolute; left: 0; right: 0; bottom: 14%; height: 14%; border-radius: 50%; background: linear-gradient(#e38215, #b75f09); box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.5); }
.dy-app--social { background: #fbf3ea; }
.dy-ig { width: 78%; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 30px 50px -30px rgba(18, 53, 47, 0.5); }
.dy-ig__head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; }
.dy-ig__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--dy-g); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dy-o); }
.dy-ig__av .dy-icon { width: 46%; }
.dy-ig__head b { display: block; font: 800 14px/1.1 var(--display); color: var(--ink); }
.dy-ig__head em { font-style: normal; font-size: 11px; color: var(--muted); }
.dy-ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.dy-ig__p { display: grid; place-items: center; aspect-ratio: 1; color: #fff; }
.dy-ig__p .dy-icon { width: 38%; }
.dy-ig__p b { font: 800 11px/1.1 var(--display); text-align: center; }
.dy-ig__p--g, .dy-ig__p--g2 { background: var(--dy-g); } .dy-ig__p--o, .dy-ig__p--o2 { background: var(--dy-o); } .dy-ig__p--w { background: #f3f4f2; color: var(--dy-g); } .dy-ig__p--c { background: var(--dy-c); color: var(--dy-g); }
@media (max-width: 1100px) {
  .dy-stage { aspect-ratio: 4 / 3; }
  .dy-anat__in { grid-template-columns: minmax(0, 1fr); padding: 80px 32px; }
  .dy-colors__row { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .dy-swatch { min-height: 240px; }
  .dy-type__in { grid-template-columns: minmax(0, 1fr); }
  .dy-apps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dy-app--cards { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dy-stage { aspect-ratio: 4 / 5; padding: 0 6%; }
  .dy-stage__cap { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .dy-anat, .dy-type { padding: 0 8px; }
  .dy-anat__in { padding: 60px 18px; border-radius: 28px; }
  .dy-colors, .dy-vers { padding-top: 100px; padding-bottom: 100px; }
  .dy-colors__row { grid-template-columns: minmax(0, 1fr); }
  .dy-swatch { min-height: 180px; }
  .dy-type__word, .dy-type__tag { min-height: 300px; padding: 32px 24px; border-radius: 28px; }
  .dy-vers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dy-v, .dy-v--wide { grid-column: 1 / -1; min-height: 220px; padding: 40px 24px; }
  .dy-v--orange, .dy-v--green:not(.dy-v--wide) { grid-column: span 1; }
  .dy-hoard__board { grid-template-columns: minmax(0, 1fr); aspect-ratio: 1.3; background: var(--dy-g); }
  .dy-hoard__sky { position: absolute; inset: 45% 0 0; padding: 0 6%; opacity: 0.6; }
  .dy-hoard__left { position: relative; z-index: 1; align-self: start; padding: 10% 8%; }
  .dy-hoard__tag { font-size: 12px; }
  .dy-apps { padding-bottom: 100px; }
  .dy-apps__grid { grid-template-columns: minmax(0, 1fr); }
  .dy-app { min-height: 340px; }
}

@media (min-width: 1441px) {
  .cs-title { font-size: 104px; }
}
@media (max-width: 960px) {
  .cs h2, .cs-end__box h2 { font-size: 44px; }
  .cs-title { font-size: 60px; }
  .cs-brief, .cs-brand__grid, .cs-proc__in { grid-template-columns: 1fr; }
  .cs-swatches { grid-row: auto; }
  .cs-stats { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .cs-proc { height: auto; padding: 120px 0; }
  .cs-proc__pin { position: static; height: auto; }
  .cs-proc__in { padding-top: 0; gap: 36px; }
  .cs-phones { gap: 20px; height: 520px; }
  .cs-phone { width: 210px; border-radius: 36px; padding: 8px; }
  .cs-phone img { border-radius: 28px; }
}
@media (max-width: 640px) {
  .cs h2, .cs-end__box h2 { font-size: 36px; }
  .cs-brief h2 { font-size: 34px; }
  .cs-title { font-size: 44px; }
  .cs-lead { font-size: 17px; line-height: 26px; }
  .cs-stage { padding: 0 10px; }
  .cs-stage__box { padding: 56px 16px 0; border-radius: 28px; }
  .cs-browser__bar { height: 32px; gap: 5px; padding: 0 10px; }
  .cs-browser__bar > i { width: 8px; height: 8px; }
  .cs-browser__url { height: 22px; font-size: 11px; padding: 0 10px; transform: none; }
  .cs-browser__view { aspect-ratio: 4 / 3.4; }
  .cs-float { height: 34px; padding: 0 12px; font-size: 13px; }
  .cs-float--a { left: 10px; top: 12px; }
  .cs-float--b { right: 10px; top: 12px; }
  .cs-float--c, .cs-float--d { display: none; }
  .cs-brief { padding-top: 96px; gap: 24px; }
  .cs-stats strong { font-size: 56px; }
  .cs-stats, .cs-brand, .cs-screens { padding-bottom: 110px; }
  .cs-screens { padding-top: 110px; }
  .cs-shots { grid-template-columns: 1fr; }
  .cs-shot__scroll { height: 420px; }
  .cs-mobile { padding-top: 100px; }
  .cs-phones { justify-content: flex-start; gap: 14px; height: auto; padding-bottom: 60px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .cs-phone { width: 220px; scroll-snap-align: center; margin-top: 0 !important; }
  .cs-strip__track { font-size: 20px; padding: 16px 0; }
  .cs-scope { padding-top: 110px; padding-bottom: 90px; }
  .cs-scope__list { grid-template-columns: 1fr; }
  .cs-end { padding-bottom: 100px; }
  .cs-end__box { padding: 64px 20px; border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cs-rv, .js .cs-w > span { opacity: 1; transform: none; transition: none; animation: none; }
  .cs-browser__view img, .cs-strip__track, .is-in .cs-float { animation: none; }
  .cs-float { opacity: 1; transform: none; }
}

/* ---------- Reels oynatıcı (tüm site) ---------- */
.rlb-able { cursor: zoom-in; }
.rlb-able:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.rlb-hint { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(25, 23, 28, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.4s var(--ease-expo); pointer-events: none; }
.rlb-hint svg { width: 24px; height: 24px; }
.rlb-able:hover .rlb-hint, .rlb-able:focus-visible .rlb-hint { opacity: 1; transform: none; }
@media (hover: none) { .rlb-hint { opacity: 0.9; transform: scale(0.8); width: 44px; height: 44px; margin: -22px 0 0 -22px; } .rlb-hint svg { width: 18px; height: 18px; } }
html.rlb-open { overflow: hidden; }
.rlb { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(14, 13, 18, 0.5); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); opacity: 0; transition: opacity 0.26s var(--ease); }
.rlb[hidden] { display: none; }
.rlb.is-open { opacity: 1; }
.rlb__stage { display: grid; place-items: center; width: 100%; height: 100%; padding: 4vh 90px; }
.rlb__frame { position: relative; height: min(88vh, 960px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.8); opacity: 0; transform: scale(0.94); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-expo); }
.rlb__frame.from-l { transform: translateX(-60px) scale(0.97); } .rlb__frame.from-r { transform: translateX(60px) scale(0.97); }
.rlb__frame.is-in { opacity: 1; transform: none; }
.rlb__frame.is-wide { height: auto; width: min(88vw, 1400px); aspect-ratio: 16 / 9; max-height: 80vh; }
.rlb__frame video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.rlb__frame.is-wide video { object-fit: contain; }
.rlb__bar { position: absolute; left: 14px; right: 14px; top: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); cursor: pointer; }
.rlb__bar::before { content: ''; position: absolute; inset: -10px 0; }
.rlb__bar i { position: absolute; inset: 0; border-radius: 4px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.rlb__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 76px 22px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff; pointer-events: none; }
.rlb__meta b { display: block; font: 800 20px/1.15 var(--display); letter-spacing: -0.02em; }
.rlb__meta span { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.8); }
.rlb__meta b:empty + span:empty { display: none; }
.rlb__snd { position: absolute; right: 16px; bottom: 18px; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; }
.rlb__snd svg { width: 22px; height: 22px; } .rlb__snd .off { display: none; }
.rlb__snd.is-off .on { display: none; } .rlb__snd.is-off .off { display: inline; }
.rlb__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.3s var(--ease-expo); pointer-events: none; }
.rlb__play svg { width: 34px; height: 34px; margin-left: 4px; }
.rlb.is-paused .rlb__play { opacity: 1; transform: none; pointer-events: auto; }
.rlb__close { position: absolute; right: 24px; top: 20px; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 400 30px/1 var(--display); cursor: pointer; transition: transform 0.3s var(--spring); }
.rlb__close:hover { transform: rotate(90deg); }
.rlb__nav { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 700 20px/1 var(--display); cursor: pointer; transition: transform 0.3s var(--spring), background 0.2s, color 0.2s; }
.rlb__nav:hover { transform: scale(1.08); background: var(--orange); color: #fff; }
.rlb__nav--prev { left: 24px; } .rlb__nav--next { right: 24px; }
.rlb.is-single .rlb__nav { display: none; }
.rlb__count { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font: 600 14px/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
@media (max-width: 640px) {
  .rlb__stage { padding: calc(70px + env(safe-area-inset-top)) 16px calc(60px + env(safe-area-inset-bottom)); }
  .rlb__frame { height: min(calc(100svh - 150px), calc((100vw - 32px) * 16 / 9)); border-radius: 22px; }
  .rlb__frame.is-wide { width: 100%; height: auto; max-height: none; border-radius: 16px; }
  .rlb__close { right: 16px; top: calc(14px + env(safe-area-inset-top)); width: 44px; height: 44px; font-size: 26px; }
  .rlb__nav { display: none; }
  .rlb__count { bottom: auto; top: calc(28px + env(safe-area-inset-top)); left: 20px; transform: none; }
  .rlb__meta { padding: 60px 70px 18px 16px; }
  .rlb__meta b { font-size: 17px; }
  .rlb__snd { width: 42px; height: 42px; right: 12px; bottom: 14px; }
  .rlb::after { content: 'Kaydırarak geçin'; position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); color: rgba(255, 255, 255, 0.75); font: 600 12px/1 var(--display); letter-spacing: 0.02em; }
  .rlb.is-single::after { content: 'Kapatmak için aşağı kaydırın'; }
}
@media (prefers-reduced-motion: reduce) { .rlb, .rlb__frame { transition: none; } }

/* ---------- KVKK ve onay alanları ---------- */
.legal-head h1 { max-width: 760px; margin: 18px auto 0; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.04em; }
.legal-head p { margin-top: 14px; color: var(--muted); }
.legal { padding-top: 0; }
.legal__body { max-width: 760px; font-size: 17px; line-height: 28px; color: var(--ink-2); }
.legal__body h2 { margin: 44px 0 12px; font: 800 24px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.legal__body p + p { margin-top: 12px; }
.legal__body ul, .legal__body ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.legal__body p + ul, .legal__body p + ol, .legal__body ul + p, .legal__body ol + p { margin-top: 12px; }
.legal__sign { margin-top: 44px; }
.legal__body a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }
.consent a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent.has-error span { color: #c8341a; }
.footer__legal { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.news__consent { margin-top: 12px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.55); }
.news__consent a { color: inherit; text-decoration: underline; }
.form__error { margin: 0; font-size: 13px; color: #c8341a; }
.dt-guide__start { position: absolute; left: 50%; bottom: 14%; z-index: 3; display: grid; justify-items: center; gap: 4px; padding: 14px 22px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.95); color: #14163f; font: 700 15px/1.1 var(--display); white-space: nowrap; transform: translateX(-50%); cursor: pointer; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6); transition: transform 0.3s var(--spring); }
.dt-guide__start:hover { transform: translateX(-50%) scale(1.04); }
.dt-guide__start i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: #a3cd3b; font-style: normal; font-size: 13px; }
.dt-guide__start small { font: 500 11px/1 var(--body); color: #6b6d8a; }
.dt-guide__start.is-loading { opacity: 0.7; pointer-events: none; }
.dt-guide__start[hidden] { display: none; }

/* Bülten onayı ve hata referansı */
.news__check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.news__check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); }
.bulten-act { margin-top: 28px; display: inline-flex; }
.bulten-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.bulten-note a, .form__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.error-ref { margin-top: 10px; font-size: 13px; color: var(--muted); }
.legal__body h3 { margin: 26px 0 10px; font: 700 18px/1.3 var(--display); color: var(--ink); }
.legal__body code { font-size: 14px; padding: 1px 6px; border-radius: 6px; background: var(--gray); }