/* ortak/yazi/outfit.css */
/* Outfit (SIL Open Font License 1.1), Google Fonts'tan 05.11.2026; ziyaretçinin IP'si Google'a gitmesin diye sitede barındırılır. */
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(ortak/yazi/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(ortak/yazi/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ortak/sahneler.css */
/* hakankaradere.com · taslak 22-31 ortak sahneler (05.11.2026). sahneler.js ile birlikte kullanılır.
   Tema: üst öğeye --sahne-* değişkenlerini verin (açık zemin için yalnızca --sahne-zemin yeter).
   --sahne-zemin   kutunun zemini              --sahne-yuzey  cihaz, kâğıt, kart yüzeyi
   --sahne-yazi    yüzeydeki yazı              --sahne-soluk  ikincil yazı
   --sahne-cizgi   yüzeydeki çizgiler          --sahne-vurgu  ana renk (düğme, seçim)
   --sahne-yesil / --sahne-sari / --sahne-kirmizi  durum renkleri
   --sahne-yazi-tipi  yazı tipi               --sahne-kose   köşe ölçeği (0 = keskin, 1 = varsayılan, 1.6 = yuvarlak)
   --sahne-golge   gölge gücü (0-1)            --sahne-ust    üstte boş bırakılan bant (varsayılan 22cqh: başlık için) */

.sahne {
  --zemin: var(--sahne-zemin, #0d0f12);
  --yuzey: var(--sahne-yuzey, #f7f7f5);
  --yazi: var(--sahne-yazi, #17191d);
  --soluk: var(--sahne-soluk, #6b7079);
  --cizgi: var(--sahne-cizgi, rgba(23, 25, 29, .12));
  --vurgu: var(--sahne-vurgu, #3d6df2);
  --yesil: var(--sahne-yesil, #1f9a5b);
  --sari: var(--sahne-sari, #eaa800);
  --kirmizi: var(--sahne-kirmizi, #e2483d);
  --kose: var(--sahne-kose, 1);
  --golge: var(--sahne-golge, .7);
  --ust: var(--sahne-ust, 22cqh);
  --ince: color-mix(in srgb, var(--yazi) 5%, var(--yuzey));
  --ince2: color-mix(in srgb, var(--yazi) 9%, var(--yuzey));
  --kagit: color-mix(in srgb, var(--yuzey) 70%, #fff);
  --r: calc(var(--kose) * .9em);
  --r2: calc(var(--kose) * .55em);
  --gol: 0 1.9em 3.4em -.9em rgb(0 0 0 / calc(.62 * var(--golge))), 0 .45em 1.1em -.25em rgb(0 0 0 / calc(.38 * var(--golge)));
  --gol2: 0 .8em 1.8em -.5em rgb(0 0 0 / calc(.45 * var(--golge)));
  container: sahne / size;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  pointer-events: none;
}
.sahne--kucuk { --ust: var(--sahne-ust-kucuk, 7cqh); }
.sahne *, .sahne *::before, .sahne *::after { box-sizing: border-box; }
.sh-ic {
  --tw: min(56cqw, 72cqh);
  --vw: min(52cqw, 62cqh);
  position: absolute;
  inset: 0;
  font: 400 clamp(9px, 1.6cqmin + 5.6px, 14px) / 1.3 var(--sahne-yazi-tipi, "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif);
  color: var(--yazi);
  letter-spacing: -.005em;
  text-align: left;
}
.sh-ic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(65% 60% at 70% 85%, color-mix(in srgb, var(--yuzey) 9%, transparent), transparent 70%),
    radial-gradient(40% 35% at 20% 100%, color-mix(in srgb, var(--vurgu) 10%, transparent), transparent 75%);
}
.sh-ic p, .sh-ic h4, .sh-ic h5, .sh-ic ol { margin: 0; padding: 0; }
.sh-ic b { font-weight: 650; }
.sh-ic em { font-style: normal; }

/* ---------- temel parçalar ---------- */
.sh-ik { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-ik--dolu { fill: currentColor; stroke: none; }
.sh-k { font-size: max(9px, .8em); color: var(--soluk); line-height: 1.25; }
.sh-yesil { color: var(--yesil); }
.sh-kirmizi { color: var(--kirmizi); }
.sh-mavi { color: var(--vurgu); font-weight: 650; font-size: max(9px, .85em); }
.sh-cz { display: block; height: .5em; border-radius: 1em; background: color-mix(in srgb, var(--yazi) 13%, transparent); flex: none; }
.sh-cz + .sh-cz { margin-top: .42em; }
.sh-cz--a { background: color-mix(in srgb, currentColor 22%, transparent); }
.sh-yuz {
  position: absolute;
  z-index: 3;
  background: var(--yuzey);
  color: var(--yazi);
  border-radius: var(--r);
  box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .5);
  padding: .8em .95em;
}
.sh-kagit {
  position: absolute;
  z-index: 2;
  background: var(--kagit);
  color: var(--yazi);
  border-radius: calc(var(--kose) * .28em);
  box-shadow: var(--gol);
}
.sh-btn {
  display: block;
  background: var(--vurgu);
  color: #fff;
  border-radius: calc(var(--kose) * .65em);
  padding: .65em .9em;
  text-align: center;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 .35em .9em -.3em color-mix(in srgb, var(--vurgu) 70%, transparent);
}
.sh-btn--k { display: inline-flex; align-items: center; gap: .3em; padding: .35em .7em; font-size: max(9px, .85em); }
.sh-btn--k .sh-ik { width: 1em; height: 1em; }
.sh-cip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .65em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--yazi) 7%, transparent);
  color: var(--yazi);
  font-size: max(9px, .8em);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}
.sh-cip .sh-ik { width: 1.05em; height: 1.05em; }
.sh-cip--y { background: color-mix(in srgb, var(--yesil) 14%, var(--yuzey)); color: color-mix(in srgb, var(--yesil) 80%, #000); }
.sh-cip--koyu { position: absolute; z-index: 5; background: #14161a; color: #fff; box-shadow: var(--gol2), inset 0 0 0 1px rgb(255 255 255 / .1); padding: .5em .85em; }
.sh-bas {
  --b: #8a8f98;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--b);
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: max(9px, .85em);
}
.sh-okr {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--yesil);
  color: #fff;
}
.sh-okr .sh-ik { width: 62%; height: 62%; stroke-width: 3; }
.sh-okr--b { width: 2.3em; height: 2.3em; }
.sh-okr--k { background: var(--kirmizi); }
.sh-okr--kahve { background: #7a4a2a; }
.sh-nok { display: inline-block; flex: none; width: .6em; height: .6em; border-radius: 50%; background: var(--kirmizi); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--kirmizi) 22%, transparent); }
.sh-nok--s { background: var(--sari); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--sari) 25%, transparent); }
.sh-nok--y { background: var(--yesil); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--yesil) 22%, transparent); }
.sh-yildizlar { display: inline-flex; gap: .08em; vertical-align: middle; }
.sh-yil { width: .95em; height: .95em; color: color-mix(in srgb, var(--yazi) 18%, transparent); }
.sh-yil--a { color: #f5b301; }
.sh-imlec { display: inline-block; width: 1.5px; height: 1.1em; background: var(--vurgu); vertical-align: middle; margin-left: 1px; }
.sh-anahtar { position: relative; display: inline-block; flex: none; width: 2.3em; height: 1.35em; border-radius: 1em; background: color-mix(in srgb, var(--yazi) 18%, transparent); }
.sh-anahtar > i { position: absolute; top: .15em; left: .15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .3s; }
.sh-anahtar--acik { background: var(--yesil); }
.sh-anahtar--acik > i { left: 1.1em; }
.sh-ilerle { display: block; height: .45em; border-radius: 1em; background: color-mix(in srgb, var(--yazi) 10%, transparent); overflow: hidden; }
.sh-ilerle > i { display: block; height: 100%; width: 75%; border-radius: inherit; background: var(--vurgu); }
.sh-toast { display: flex; align-items: center; gap: .7em; padding: .7em 1.05em .7em .75em; }
.sh-toast > div { display: flex; flex-direction: column; min-width: 0; }
.sh-toast b { white-space: nowrap; }
.sh-qr { display: block; width: 100%; height: auto; border-radius: .2em; }
.sh-yemek { display: block; width: 100%; height: 100%; }
.sh-foto {
  --fz: #3b2a22;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: calc(var(--kose) * .5em);
  background: radial-gradient(90% 90% at 35% 25%, color-mix(in srgb, var(--fz) 70%, #fff), var(--fz) 60%, color-mix(in srgb, var(--fz) 70%, #000));
}
.sh-foto .sh-yemek { width: 80%; height: 80%; filter: drop-shadow(0 .25em .35em rgb(0 0 0 / .4)); }
.sh-cizim { display: block; width: 100%; height: 100%; }

/* ---------- telefon ---------- */
.sh-tel {
  position: absolute;
  z-index: 2;
  right: 9cqw;
  top: calc(var(--ust) + 2cqh);
  width: var(--tw);
  height: calc(var(--tw) * 2.06);
  padding: calc(var(--tw) * .03);
  border-radius: calc(var(--tw) * .165);
  background: linear-gradient(150deg, #4a4e56 0%, #16181c 16%, #0a0b0d 62%, #2a2d33 100%);
  box-shadow: inset 0 0 0 calc(var(--tw) * .007) rgb(255 255 255 / .16), inset 0 0 0 calc(var(--tw) * .014) #050607, var(--gol);
  transform: perspective(calc(var(--tw) * 7)) rotateY(-10deg) rotateX(4deg) rotate(1.2deg);
  transform-origin: 50% 0;
}
.sh-tel::after {
  content: "";
  position: absolute;
  right: calc(var(--tw) * -.012);
  top: 22%;
  width: calc(var(--tw) * .012);
  height: 12%;
  border-radius: 0 3px 3px 0;
  background: #2a2d32;
}
.sh-tel__ekran {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--tw) * .135);
  background: var(--yuzey);
  color: var(--yazi);
}
.sh-tel__ekran::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / 0) 30%);
  mix-blend-mode: soft-light;
}
.sh-durum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5em;
  padding: 0 1.25em 0 1.5em;
  font-size: max(9px, .85em);
}
.sh-durum b { font-weight: 650; letter-spacing: 0; }
.sh-ada { position: absolute; left: 50%; top: .55em; width: 32%; height: 1.45em; margin-left: -16%; border-radius: 1em; background: #050506; }
.sh-durum__s { display: inline-flex; align-items: center; gap: .3em; }
.sh-durum__s svg { height: .75em; width: auto; fill: currentColor; }
.sh-durum__s svg:last-child { height: .85em; }
.sh-durum--acik { color: #fff; }
.sh-ap { display: flex; flex-direction: column; gap: .62em; padding: .2em 1em 1em; }
.sh-ap__bas { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 2em; }
.sh-ap__bas > b { flex: 1; text-align: center; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ap__bas > .sh-ik { color: var(--vurgu); }
.sh-ap__bas > i:last-child:empty { width: 1.15em; }
.sh-ap__bas > .sh-k, .sh-ap__bas > .sh-mavi { white-space: nowrap; }

/* telefon yerleşimi: dik kutuda ortada */
@container sahne (max-aspect-ratio: 1/1) {
  .sh-ic { --tw: min(64cqw, 60cqh); }
  .sh-tel { right: auto; left: calc(50% - var(--tw) / 2); }
}
@container sahne (min-aspect-ratio: 3/2) {
  .sh-ic { --tw: min(44cqw, 74cqh); }
  .sh-tel { right: 11cqw; }
}

@container sahne (max-width: 340px) and (min-aspect-ratio: 1/1) { .sh-tel { right: 5cqw; } }
/* yanda yüzen kart */
.sh-yan { left: 5cqw; bottom: 9cqh; max-width: min(44cqw, 21em); z-index: 4; }
.sh-yan--ust { bottom: auto; top: calc(var(--ust) + 14cqh); }
@container sahne (min-aspect-ratio: 3/2) {
  .sh-yan { left: auto; right: calc(11cqw + var(--tw) - 2.5em); bottom: 16cqh; max-width: min(40cqw, 21em); }
  .sh-yan--ust { bottom: auto; top: calc(var(--ust) + 12cqh); }
}
@container sahne (max-aspect-ratio: 1/1) {
  .sh-yan { left: 6cqw; right: auto; bottom: 6cqh; max-width: 84cqw; }
  .sh-yan--ust { bottom: auto; top: calc(var(--ust) + 30cqh); }
}

/* ---------- tarayıcı penceresi ---------- */
.sh-pen {
  position: absolute;
  z-index: 1;
  left: 7cqw;
  right: -4cqw;
  top: calc(var(--ust) + 2cqh);
  bottom: -10cqh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--yuzey);
  border-radius: calc(var(--kose) * .75em) 0 0 0;
  box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .4);
  transform: perspective(160em) rotateY(-7deg) rotateX(3deg);
  transform-origin: 0 0;
}
.sh-pen__ust { flex: none; display: flex; align-items: center; gap: .38em; height: 2.3em; padding: 0 .8em; background: var(--ince2); border-bottom: 1px solid var(--cizgi); }
.sh-pen__ust > i { width: .62em; height: .62em; border-radius: 50%; background: #ff5f57; flex: none; }
.sh-pen__ust > i:nth-child(2) { background: #febc2e; }
.sh-pen__ust > i:nth-child(3) { background: #28c840; }
.sh-pen__adres {
  display: flex;
  align-items: center;
  gap: .35em;
  min-width: 0;
  margin: 0 auto 0 .8em;
  padding: .25em .9em;
  max-width: 60%;
  border-radius: 1em;
  background: var(--yuzey);
  color: var(--soluk);
  font-size: max(9px, .8em);
  white-space: nowrap;
}
.sh-pen__adres > span { overflow: hidden; text-overflow: ellipsis; }
.sh-pen__adres .sh-ik { width: .95em; height: .95em; }
.sh-pen__govde { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* ---------- hareket ---------- */
.sahne--bekle [data-a] { opacity: 0; }
.sahne--canli [data-a] { animation: sh-yuk .85s cubic-bezier(.2, .75, .25, 1) var(--d, 0s) both; }
.sahne--canli [data-a="pop"] { animation-name: sh-pop; animation-duration: .6s; }
.sahne--canli [data-a="sag"] { animation-name: sh-sag; }
.sahne--canli [data-a="damga"] { animation-name: sh-damga; animation-duration: .55s; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
.sahne--canli [data-a="tik"] { animation-name: sh-tik; animation-duration: 1.1s; }
.sahne--canli [data-a="pin"] { animation-name: sh-pin; animation-duration: .9s; }
.sahne--canli [data-a="kalp"] { animation-name: sh-kalp; animation-duration: 1.1s; }
.sahne--canli .sh-imlec { animation: sh-yanip 1s steps(1) 0s 6; }
.sahne--canli .sh-halka__d { animation: sh-halka 1.5s cubic-bezier(.3, .7, .2, 1) .35s both; }
.sahne--bekle .sh-halka__d { stroke-dashoffset: var(--C); }
.sahne--canli .sh-mh__d { animation: sh-halka 1.3s cubic-bezier(.3, .7, .2, 1) 1.1s both; }
.sahne--canli .sh-graf__cizgi { animation: sh-ciz 1.4s cubic-bezier(.4, 0, .2, 1) .3s both; }
.sahne--canli .sh-graf__alan { animation: sh-sol .9s ease-out 1s both; }
.sahne--canli .sh-h__rota { animation: sh-ciz 1.6s ease-in-out .4s both; }
.sahne--canli .sh-ilerle > i { animation: sh-dol 1.6s cubic-bezier(.4, 0, .2, 1) 1s both; }
.sahne--canli .sh-cub__s > i > i { animation: sh-dol 1.1s cubic-bezier(.3, .7, .2, 1) var(--d, .4s) both; }
.sahne--canli .sh-bar > i { animation: sh-dol 1s cubic-bezier(.3, .7, .2, 1) .6s both; }
.sahne--canli .sh-anahtar--acik > i { animation: sh-anahtar .5s ease 1.3s both; }
.sahne--canli .sh-anahtar--acik { animation: sh-anahtar-z .5s ease 1.3s both; }
.sahne--canli .sh-sure__d { animation: sh-sure 2.2s cubic-bezier(.3, .7, .2, 1) .5s both; }
.sahne--canli .sh-wa__yaz { animation: sh-yuk .5s ease var(--d) both, sh-gizle .3s ease calc(var(--d) + 1.6s) forwards; }
.sahne--canli .sh-dalgaf > i { animation: sh-dalga .9s ease-in-out calc(var(--i, 0) * -.07s) 3 alternate; }
.sahne--canli .sh-h__nabiz { animation: sh-nabiz 1.6s ease-out 1.2s 3; }
.sahne--canli .sh-dalga { animation: sh-nabiz 1s ease-out 1.6s 2; }
@keyframes sh-yuk { from { opacity: 0; translate: 0 1.3em; } }
@keyframes sh-pop { from { opacity: 0; scale: .82; } 60% { opacity: 1; scale: 1.03; } }
@keyframes sh-sag { from { opacity: 0; translate: -1.4em 0; } }
@keyframes sh-damga { from { opacity: 0; scale: 2.3; } 70% { opacity: 1; } }
@keyframes sh-tik { 0% { opacity: 0; translate: 2.5em 2.5em; } 55% { opacity: 1; translate: 0 0; scale: 1; } 72% { scale: .86; } 100% { scale: 1; } }
@keyframes sh-pin { 0% { opacity: 0; translate: 0 -2.5em; } 60% { opacity: 1; translate: 0 .2em; } 100% { translate: 0 0; } }
@keyframes sh-kalp { 0% { opacity: 0; scale: .3; } 35% { opacity: 1; scale: 1.15; } 60% { scale: 1; opacity: 1; } 100% { opacity: 0; scale: 1.05; } }
@keyframes sh-yanip { 50% { opacity: 0; } }
@keyframes sh-halka { from { stroke-dashoffset: var(--C); } }
@keyframes sh-ciz { from { stroke-dashoffset: 1; } }
@keyframes sh-sol { from { opacity: 0; } }
@keyframes sh-dol { from { width: 0; } }
@keyframes sh-anahtar { from { left: .15em; } }
@keyframes sh-anahtar-z { from { background: color-mix(in srgb, var(--yazi) 18%, transparent); } }
@keyframes sh-sure { from { stroke-dashoffset: 0; } }
@keyframes sh-gizle { to { opacity: 0; height: 0; padding: 0; margin: 0; } }
@keyframes sh-dalga { from { scale: 1 .35; } }
@keyframes sh-nabiz { from { opacity: .7; scale: .4; } to { opacity: 0; scale: 2.2; } }
@media (prefers-reduced-motion: reduce) {
  .sahne *, .sahne *::before, .sahne *::after { animation: none !important; transition: none !important; }
  .sahne--bekle [data-a] { opacity: 1; }
}

/* ================= SAHNELER ================= */

/* form */
.sh-adimc { height: .32em; border-radius: 1em; background: color-mix(in srgb, var(--yazi) 9%, transparent); overflow: hidden; }
.sh-adimc > i { display: block; height: 100%; background: var(--vurgu); border-radius: inherit; }
.sh-alan { display: flex; flex-direction: column; gap: .3em; }
.sh-alan__e { font-size: max(9px, .8em); font-weight: 600; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-girdi {
  display: flex;
  align-items: center;
  gap: .4em;
  min-height: 2.3em;
  padding: 0 .75em;
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  background: var(--ince);
  white-space: nowrap;
  overflow: hidden;
}
.sh-girdi > span { overflow: hidden; text-overflow: ellipsis; }
.sh-girdi > .sh-cz { flex: 1 1 auto; max-width: 70%; }
.sh-girdi--dolu { background: var(--yuzey); }
.sh-girdi--aktif { border-color: var(--vurgu); background: var(--yuzey); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--vurgu) 18%, transparent); }
.sh-girdi__ok { margin-left: auto; width: 1.3em; height: 1.3em; }
.sh-ap > .sh-btn { margin-top: .3em; }
.sh-liste { display: flex; flex-direction: column; gap: .45em; }
.sh-liste__s { display: flex; align-items: center; gap: .6em; padding: .55em .65em; border-radius: var(--r2); background: var(--ince); white-space: nowrap; }
.sh-liste__s > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-liste__s .sh-bas { --b: var(--vurgu); width: 1.9em; height: 1.9em; }
.sh-liste__s:nth-child(2) .sh-bas { --b: #d48a3a; }
.sh-liste__s:nth-child(3) .sh-bas { --b: #3fa37a; }
.sh-liste__t { color: var(--soluk); opacity: .6; }
.sh-liste__ekle { justify-content: center; background: none; border: 1px dashed var(--cizgi); color: var(--vurgu); font-weight: 600; }

/* inceleme */
.sahne--inceleme .sh-ince { z-index: 2; left: 8cqw; top: calc(var(--ust) + 3cqh); width: min(50cqw, 24em); padding: 0 0 .5em; overflow: hidden; transform: perspective(120em) rotateY(8deg) rotateX(4deg); }
.sh-ince__ara { display: flex; align-items: center; gap: .5em; margin: .7em .7em .6em; padding: .5em .8em; border-radius: 2em; background: var(--ince2); font-size: max(9px, .85em); white-space: nowrap; overflow: hidden; }
.sh-ince__ara .sh-ik { color: var(--soluk); }
.sh-ince__kapak { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; height: 4.6em; }
.sh-ince__kapak .sh-foto { aspect-ratio: auto; border-radius: 0; height: 100%; }
.sh-ince__ad { display: flex; flex-direction: column; gap: .25em; padding: .65em .9em .35em; }
.sh-ince__ad b { font-size: 1.12em; }
.sh-ince__s { display: flex; align-items: center; gap: .6em; height: 2.15em; margin: 0 .9em; border-top: 1px solid var(--cizgi); }
.sh-ince__s .sh-ik { color: var(--soluk); }
.sh-ince__s .sh-cz { flex: none; }
.sh-ince__s .sh-nok { margin-left: auto; }
.sh-isaretler { position: absolute; z-index: 4; left: calc(8cqw + min(50cqw, 24em) - 2.2em); top: calc(var(--ust) + 3cqh + 12.2em); display: flex; flex-direction: column; gap: .5em; }
.sh-isaret {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em .85em .5em .6em;
  border-radius: 2em;
  background: #fff;
  color: #17191d;
  font-weight: 650;
  font-size: max(9px, .9em);
  white-space: nowrap;
  box-shadow: var(--gol2), inset 0 0 0 1.5px color-mix(in srgb, var(--kirmizi) 50%, transparent);
}
.sh-isaret > i { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--kirmizi); flex: none; position: relative; }
.sh-isaret > i::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 800; font-size: .8em; }
.sh-isaret--s { box-shadow: var(--gol2), inset 0 0 0 1.5px color-mix(in srgb, var(--sari) 60%, transparent); }
.sh-isaret--s > i { background: var(--sari); }
.sh-buyutec { position: absolute; z-index: 5; left: calc(8cqw + min(50cqw, 24em) * .48); top: calc(var(--ust) + 3cqh + 7.4em); width: 7.5em; height: 7.5em; filter: drop-shadow(0 .5em .8em rgb(0 0 0 / .45)); }
.sh-buyutec svg { width: 100%; height: 100%; fill: rgb(255 255 255 / .1); stroke: #e9ecf1; stroke-linecap: round; }
.sh-buyutec circle { stroke-width: 6; fill: rgb(200 220 255 / .14); }
.sh-buyutec path { stroke-width: 11; stroke: #2a2d33; }
@container sahne (max-aspect-ratio: 1/1) {
  .sahne--inceleme .sh-ince { left: 7cqw; width: 80cqw; }
  .sh-isaretler { left: auto; right: 4cqw; top: auto; bottom: 6cqh; }
  .sh-buyutec { left: 50cqw; }
}
@container sahne (max-height: 260px) {
  .sh-ince__kapak { height: 3.2em; }
  .sh-isaretler { top: auto; bottom: 5cqh; gap: .35em; }
  .sh-buyutec { width: 5.5em; height: 5.5em; top: calc(var(--ust) + 4cqh + 4em); }
}

/* karne */
.sh-karne {
  z-index: 2;
  left: calc(50% - min(58cqw, 26em) / 2 + 9cqw);
  top: calc(var(--ust) + 3cqh);
  width: min(58cqw, 26em);
  padding: 1em 1.15em .9em;
  transform: perspective(110em) rotateX(12deg) rotateY(-8deg) rotateZ(-2.5deg);
  transform-origin: 50% 0;
}
.sh-karne::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .32em; border-radius: inherit; background: linear-gradient(90deg, var(--kirmizi), var(--sari), var(--yesil)); opacity: .9; }
.sh-karne__bas { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: .55em; padding-bottom: .6em; border-bottom: 1px solid var(--cizgi); }
.sh-karne__bas > div:first-child { display: flex; flex-direction: column; gap: .2em; align-items: flex-start; }
.sh-karne__bas > div:first-child b { font-size: 1.35em; letter-spacing: -.02em; }
.sh-karne__bas .sh-k { letter-spacing: .08em; font-weight: 600; }
.sh-halka { position: relative; flex: none; width: 4.6em; height: 4.6em; --hr: var(--sari); }
.sh-halka--y { --hr: var(--yesil); }
.sh-halka--k { --hr: var(--kirmizi); }
.sh-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh-halka__z { fill: none; stroke: color-mix(in srgb, var(--yazi) 9%, transparent); stroke-width: 9; }
.sh-halka__d { fill: none; stroke: var(--hr); stroke-width: 9; stroke-linecap: round; stroke-dashoffset: var(--bos); }
.sh-halka__s { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sh-halka__s b { font-size: 1.55em; letter-spacing: -.03em; }
.sh-halka__s span { font-size: max(9px, .62em); color: var(--soluk); margin-top: .15em; }
.sh-karne__s { display: grid; grid-template-columns: 7.4em 1fr 3.1em; align-items: center; gap: .6em; height: 1.95em; font-size: max(9px, .92em); }
.sh-karne__s > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-bar { display: block; height: .42em; border-radius: 1em; background: color-mix(in srgb, var(--yazi) 8%, transparent); overflow: hidden; }
.sh-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--yesil); }
.sh-bar--s > i { background: var(--sari); }
.sh-bar--k > i { background: var(--kirmizi); }
.sh-etk { justify-self: end; padding: .15em .5em; border-radius: 1em; font-weight: 650; font-size: max(9px, .82em); background: color-mix(in srgb, var(--yesil) 14%, transparent); color: color-mix(in srgb, var(--yesil) 82%, #000); white-space: nowrap; }
.sh-etk--s { background: color-mix(in srgb, var(--sari) 20%, transparent); color: color-mix(in srgb, var(--sari) 60%, #000); }
.sh-etk--k { background: color-mix(in srgb, var(--kirmizi) 14%, transparent); color: color-mix(in srgb, var(--kirmizi) 85%, #000); }
.sh-etk--m { background: color-mix(in srgb, var(--vurgu) 14%, transparent); color: color-mix(in srgb, var(--vurgu) 85%, #000); }
.sh-karne-arka {
  z-index: 1;
  left: calc(50% - min(58cqw, 26em) / 2 + 9cqw - min(30cqw, 14em) + 2em);
  top: calc(var(--ust) + 14cqh);
  width: min(30cqw, 14em);
  padding: .9em 1em;
  display: flex;
  flex-direction: column;
  gap: .55em;
  transform: perspective(110em) rotateX(12deg) rotateZ(-9deg);
  filter: brightness(.93);
}
.sh-karne-arka .sh-k { letter-spacing: .06em; font-weight: 600; }
.sh-karne-arka__s { display: flex; align-items: center; gap: .55em; font-size: max(9px, .9em); white-space: nowrap; }
.sh-num { display: inline-grid; place-items: center; flex: none; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--yazi); color: var(--yuzey); font-style: normal; font-weight: 700; font-size: max(9px, .8em); }
@container sahne (max-width: 400px) { .sh-karne-arka { display: none; } .sh-karne { left: calc(50% - min(80cqw, 26em) / 2); width: min(80cqw, 26em); } }
@container sahne (max-aspect-ratio: 13/10) { .sh-karne-arka { display: none; } .sh-karne { left: calc(50% - min(80cqw, 26em) / 2); width: min(80cqw, 26em); } }
@container sahne (max-height: 300px) { .sh-karne__s:nth-of-type(n+6) { display: none; } }
@container sahne (max-height: 230px) { .sh-karne__s:nth-of-type(n+5) { display: none; } }

/* karar */
.sh-karar { position: absolute; inset: calc(var(--ust) + 4cqh) 6cqw 8cqh; display: flex; align-items: flex-start; justify-content: center; gap: 4cqw; perspective: 90em; }
.sh-sec {
  position: relative;
  flex: 0 1 15em;
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: 1em 1.05em 1.2em;
  border-radius: var(--r);
  background: var(--yuzey);
  box-shadow: var(--gol);
  transform: rotateY(12deg) rotateZ(-2deg);
  opacity: .82;
}
.sh-sec b { font-size: 1.12em; line-height: 1.2; }
.sh-sec .sh-cz { width: 86%; }
.sh-sec__ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3em; }
.sh-sec__ik { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: var(--r2); background: var(--ince2); color: var(--soluk); }
.sh-sec__ik .sh-ik { width: 1.35em; height: 1.35em; }
.sh-radyo { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid var(--cizgi); color: transparent; }
.sh-radyo .sh-ik { width: 70%; height: 70%; stroke-width: 3; }
.sh-sec--secili { opacity: 1; transform: rotateY(-10deg) rotateZ(1.5deg) translateY(-1.2em); box-shadow: var(--gol), 0 0 0 .2em var(--vurgu); }
.sh-sec--secili .sh-sec__ik { background: color-mix(in srgb, var(--vurgu) 14%, transparent); color: var(--vurgu); }
.sh-sec--secili .sh-radyo { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.sh-imlecok { position: absolute; z-index: 5; right: max(6cqw, calc(50% - 15em)); bottom: 4cqh; width: 2.4em; height: 2.4em; }
.sh-imlecok svg { position: relative; width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .2em .3em rgb(0 0 0 / .4)); }
.sh-dalga { position: absolute; left: -.6em; top: -.6em; width: 1.6em; height: 1.6em; border-radius: 50%; background: color-mix(in srgb, var(--vurgu) 55%, transparent); opacity: 0; }
@container sahne (max-width: 340px) { .sh-karar { gap: 3cqw; left: 4cqw; right: 4cqw; } .sh-sec { padding: .8em .8em 1em; } .sh-sec .sh-cz:last-child { display: none; } }
@container sahne (max-aspect-ratio: 1/1) {
  .sh-karar { flex-direction: column; align-items: center; gap: 3cqh; }
  .sh-sec { flex: none; width: 76cqw; }
  .sh-sec--secili { translate: 0 0; transform: rotateX(8deg) rotateZ(1deg); }
}

/* erisim */
.sh-pen--eri { right: 22cqw; bottom: 14cqh; border-radius: calc(var(--kose) * .75em); filter: saturate(.9); }
.sh-pen--eri .sh-pen__govde::after { content: ""; position: absolute; inset: 0; background: rgb(10 12 16 / .32); }
.sh-eri { padding: .9em 1em; display: flex; flex-direction: column; gap: .6em; }
.sh-eri__bas { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2em; }
.sh-eri__bas b { font-size: 1.05em; }
.sh-eri__s { display: flex; align-items: center; gap: .65em; padding-bottom: .55em; border-bottom: 1px solid var(--cizgi); }
.sh-eri__s > div { flex: 1; display: flex; flex-direction: column; gap: .2em; }
.sh-eri__s .sh-cz { width: 60%; }
.sh-diyalog { z-index: 4; right: 6cqw; top: calc(var(--ust) + 12cqh); width: min(58cqw, 19em); display: flex; flex-direction: column; gap: .4em; padding: 1em 1.05em; }
.sh-diyalog__b { font-size: 1.1em; margin-bottom: .2em; }
.sh-diyalog .sh-girdi { margin-bottom: .25em; }
.sh-secim { display: flex; align-items: center; gap: .45em; min-height: 2.3em; padding: 0 .75em; border: 1px solid var(--cizgi); border-radius: var(--r2); font-weight: 600; }
.sh-secim > span { flex: 1; }
.sh-secim .sh-ik:first-child { color: var(--vurgu); }
.sh-diyalog__d { display: flex; align-items: center; justify-content: flex-end; gap: .9em; margin-top: .45em; color: var(--soluk); font-weight: 600; }
.sh-diyalog__d .sh-btn { padding: .5em .95em; }
.sh-eri__not { position: absolute; z-index: 5; left: 9cqw; bottom: 7cqh; padding: .55em .9em; box-shadow: var(--gol2); }
@container sahne (max-aspect-ratio: 1/1) { .sh-pen--eri { right: 6cqw; bottom: 30cqh; } .sh-diyalog { width: 80cqw; right: 5cqw; top: calc(var(--ust) + 20cqh); } }
@container sahne (max-height: 260px) { .sh-eri__not { display: none; } .sh-diyalog { top: calc(var(--ust) + 4cqh); } }

/* oncesonra */
.sh-os { width: min(46cqw, 18em); display: flex; flex-direction: column; gap: .55em; padding: 1.05em 1em 1em; }
.sh-os--once { z-index: 2; left: 6cqw; top: calc(var(--ust) + 6cqh); transform: perspective(90em) rotateY(14deg) rotateZ(-4deg); filter: grayscale(.85) brightness(.8); }
.sh-os--sonra { z-index: 3; right: 6cqw; top: calc(var(--ust) + 2cqh); transform: perspective(90em) rotateY(-10deg) rotateZ(2deg); box-shadow: var(--gol), 0 0 0 .18em color-mix(in srgb, var(--yesil) 65%, transparent); }
.sh-os__et { position: absolute; top: -.85em; left: 1em; padding: .25em .7em; border-radius: 1em; background: #4b5058; color: #fff; font-weight: 700; font-size: max(9px, .8em); }
.sh-os--sonra .sh-os__et { background: var(--yesil); }
.sh-os__ad { display: flex; align-items: center; gap: .6em; }
.sh-os__ad > div { flex: 1; display: flex; flex-direction: column; gap: .35em; }
.sh-os__s { display: flex; align-items: center; gap: .5em; padding-top: .5em; border-top: 1px solid var(--cizgi); white-space: nowrap; font-size: max(9px, .9em); }
.sh-os__s > span { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.sh-os__s > .sh-ik { color: var(--soluk); }
.sh-os__s .sh-cz { flex: none; }
.sh-os__fotolar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; }
.sh-os__fotolar--bos { grid-template-columns: repeat(3, 1fr); }
.sh-os__fotolar--bos i { aspect-ratio: 1; border-radius: calc(var(--kose) * .5em); border: 1.5px dashed var(--cizgi); }
.sh-os__ok { position: absolute; z-index: 4; left: calc(50% - 3em); top: calc(var(--ust) + 1cqh); width: 6em; height: 3em; fill: none; stroke: color-mix(in srgb, var(--yuzey) 80%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@container sahne (max-aspect-ratio: 1/1) {
  .sh-os { width: 74cqw; }
  .sh-os--once { left: 5cqw; top: calc(var(--ust) + 2cqh); }
  .sh-os--sonra { right: 5cqw; top: calc(var(--ust) + 32cqh); }
  .sh-os__ok { left: auto; right: 6cqw; top: calc(var(--ust) + 20cqh); transform: rotate(80deg); }
}
@container sahne (max-width: 340px) { .sh-os { width: 52cqw; padding: .9em .75em .75em; } .sh-os--once { left: 3cqw; } .sh-os--sonra { right: 3cqw; } .sh-os__ok { display: none; } .sh-os .sh-yildizlar { display: none; } }

/* rehber */
.sh-reh__bas { display: flex; align-items: flex-start; gap: .6em; padding: .75em .8em; border-radius: var(--r2); background: color-mix(in srgb, var(--vurgu) 10%, var(--yuzey)); }
.sh-reh__bas .sh-ik { color: var(--vurgu); width: 1.4em; height: 1.4em; margin-top: .05em; }
.sh-reh__bas b { line-height: 1.25; }
.sh-reh { list-style: none; display: flex; flex-direction: column; gap: 0; position: relative; }
.sh-reh__s { position: relative; display: flex; gap: .7em; padding: .45em 0 .55em; }
.sh-reh__s:not(:last-child)::before { content: ""; position: absolute; left: .78em; top: 2.1em; bottom: -.2em; width: 1.5px; background: var(--cizgi); }
.sh-reh__s > div { flex: 1; display: flex; flex-direction: column; gap: .4em; padding-top: .18em; min-width: 0; }
.sh-reh__n { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; border: 1.5px solid var(--cizgi); font-style: normal; font-weight: 700; font-size: max(9px, .85em); color: var(--soluk); background: var(--yuzey); }
.sh-reh__n .sh-ik { width: 70%; height: 70%; stroke-width: 3; }
.sh-reh__s--bitti .sh-reh__n { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.sh-reh__s--bitti > div > span { color: var(--soluk); }
.sh-reh__s--simdi .sh-reh__n { border-color: var(--vurgu); color: var(--vurgu); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--vurgu) 18%, transparent); }
.sh-reh__s--simdi > div > span { font-weight: 650; }
.sh-reh__mini { padding: .55em .65em; border-radius: var(--r2); background: var(--ince); border: 1px solid var(--cizgi); }
.sh-reh__mini--s { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: max(9px, .85em); font-weight: 600; }
.sh-giris { display: flex; flex-direction: column; gap: .35em; width: min(46cqw, 15em); }
.sh-giris > b { margin-bottom: .2em; }
.sh-giris .sh-girdi { letter-spacing: .15em; color: var(--soluk); min-height: 2em; }
.sh-giris .sh-cip { margin-top: .4em; align-self: flex-start; }
.sh-anahtar-kart { display: flex; flex-direction: column; gap: .6em; width: min(46cqw, 15em); }
.sh-anahtar-kart > div:first-child { display: flex; align-items: center; gap: .5em; }
.sh-anahtar-kart > div:first-child .sh-ik { color: var(--yesil); width: 1.4em; height: 1.4em; }
.sh-anahtar-kart__s { display: flex; align-items: center; justify-content: space-between; padding: .55em .7em; border-radius: var(--r2); background: color-mix(in srgb, var(--yesil) 10%, var(--yuzey)); font-weight: 700; }
.sh-anahtar-kart .sh-anahtar { width: 2.8em; height: 1.6em; }
.sh-anahtar-kart .sh-anahtar > i { width: 1.3em; height: 1.3em; }
.sh-anahtar-kart .sh-anahtar--acik > i { left: 1.35em; }

/* yükleme */
.sh-sekme { display: flex; gap: 1em; font-size: max(9px, .85em); color: var(--soluk); font-weight: 600; border-bottom: 1px solid var(--cizgi); }
.sh-sekme > span { padding-bottom: .45em; white-space: nowrap; }
.sh-sekme--a { color: var(--yazi); box-shadow: inset 0 -2px 0 var(--yazi); }
.sh-sekme--cip { border: 0; gap: .4em; }
.sh-sekme--cip > span { padding: .35em .75em; border-radius: 2em; background: var(--ince2); }
.sh-sekme--cip .sh-sekme--a { background: var(--yazi); color: var(--yuzey); box-shadow: none; }
.sh-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -.45em; }
.sh-foto-k { position: relative; }
.sh-foto-k .sh-foto { border-radius: calc(var(--kose) * .3em); }
.sh-foto--belge { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; border-radius: calc(var(--kose) * .3em); background: var(--ince2); color: var(--kirmizi); font-size: max(9px, .75em); font-weight: 700; }
.sh-foto--belge > .sh-ik { width: 2em; height: 2em; }
.sh-foto--belge > span { color: var(--soluk); }
.sh-sira { position: absolute; top: .35em; right: .35em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--vurgu); color: #fff; border: 1.5px solid #fff; font-style: normal; font-weight: 700; font-size: max(9px, .75em); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.sh-sira--bos { background: rgb(0 0 0 / .15); }
.sh-yuk { width: min(48cqw, 17em); display: flex; flex-direction: column; gap: .7em; }
.sh-yuk__ust { display: flex; align-items: center; gap: .65em; }
.sh-yuk__ust > div { display: flex; flex-direction: column; min-width: 0; }
.sh-yuk__ust b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-yuk__ik { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: var(--r2); background: color-mix(in srgb, var(--vurgu) 14%, transparent); color: var(--vurgu); }

/* site */
.sh-pen--site { right: -8cqw; left: 16cqw; }
.sh-site { --sk: #f4ece2; --sy: #2a1a12; --sv: #c2482c; height: 100%; background: var(--sk); color: var(--sy); }
.sh-site__nav { display: flex; align-items: center; gap: 1.3em; padding: .8em 1.4em; font-size: max(9px, .85em); white-space: nowrap; }
.sh-site__nav > b { display: flex; align-items: center; gap: .5em; margin-right: auto; font-size: 1.1em; letter-spacing: -.01em; }
.sh-site__logo { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--sy); color: var(--sk); font-style: normal; font-size: .85em; }
.sh-site__nav > span { opacity: .7; }
.sh-site__nav > em { padding: .4em .85em; border-radius: 2em; background: var(--sy); color: var(--sk); font-weight: 600; }
.sh-site__hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 1em; padding: .6em 1.4em 1em; }
.sh-site__yazi { display: flex; flex-direction: column; gap: .55em; color: var(--sy); }
.sh-site__ust { width: 40%; }
.sh-site__ust .sh-cz { background: var(--sv); opacity: .6; }
.sh-site__yazi h4 { font: 700 2.1em/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.sh-site__yazi .sh-cz { color: var(--sy); }
.sh-site__d { display: flex; gap: .5em; margin-top: .4em; font-size: max(9px, .85em); font-weight: 650; white-space: nowrap; }
.sh-site__d em { padding: .55em 1em; border-radius: 2em; background: var(--sv); color: #fff; }
.sh-site__d span { padding: .55em 1em; border-radius: 2em; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sy) 30%, transparent); }
.sh-site__gorsel { aspect-ratio: 1; max-height: 13em; justify-self: center; width: 100%; max-width: 13em; filter: drop-shadow(0 .6em 1em rgb(60 30 10 / .35)); }
.sh-site__kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding: 0 1.4em; }
.sh-site__urun { display: grid; grid-template-columns: 2.4em 1fr; grid-template-rows: auto auto; column-gap: .55em; align-items: center; padding: .5em; border-radius: var(--r2); background: rgb(255 255 255 / .6); font-size: max(9px, .85em); }
.sh-site__urun .sh-foto { grid-row: span 2; }
.sh-site__urun b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-site__urun span { color: var(--sv); font-weight: 650; }
.sh-tel--mini { --tw: min(30cqw, 46cqh); right: auto; left: 5cqw; top: calc(var(--ust) + 22cqh); z-index: 3; width: var(--tw); height: calc(var(--tw) * 2.06); transform: perspective(calc(var(--tw) * 7)) rotateY(12deg) rotateX(4deg) rotate(-3deg); }
.sh-ekran--krem { background: #f4ece2; color: #2a1a12; }
.sh-mob { padding: .2em .8em; display: flex; flex-direction: column; gap: .5em; color: #2a1a12; }
.sh-mob__nav { display: flex; align-items: center; justify-content: space-between; font-size: max(9px, .85em); white-space: nowrap; }
.sh-mob__nav > b { overflow: hidden; text-overflow: ellipsis; }
.sh-mob__nav > i { width: 1.1em; height: .7em; border-top: 2px solid; border-bottom: 2px solid; flex: none; position: relative; }
.sh-mob__gorsel { width: 76%; align-self: center; aspect-ratio: 1; filter: drop-shadow(0 .4em .6em rgb(60 30 10 / .3)); }
.sh-mob h5 { font: 700 1.25em/1.05 Georgia, "Times New Roman", serif; }
.sh-mob__btn { align-self: flex-start; padding: .5em .9em; border-radius: 2em; background: #c2482c; color: #fff; font-weight: 650; font-size: max(9px, .8em); white-space: nowrap; }
@container sahne (min-aspect-ratio: 3/2) { .sh-pen--site { left: 30cqw; } .sh-tel--mini { left: 7cqw; top: calc(var(--ust) + 8cqh); --tw: min(26cqw, 56cqh); } }
@container sahne (max-width: 520px) {
  .sh-site__hero { grid-template-columns: 1fr; }
  .sh-site__gorsel { display: none; }
  .sh-site__nav > span { display: none; }
  .sh-site__kartlar { grid-template-columns: 1fr 1fr; }
  .sh-site__urun:nth-child(3) { display: none; }
  .sh-pen--site { left: 30cqw; }
  .sh-tel--mini { --tw: min(36cqw, 50cqh); left: 4cqw; top: calc(var(--ust) + 8cqh); }
}
@container sahne (max-aspect-ratio: 1/1) { .sh-pen--site { left: 22cqw; bottom: 34cqh; } .sh-tel--mini { --tw: min(44cqw, 36cqh); top: calc(var(--ust) + 26cqh); } }

/* düzeltme */
.sh-pen--duz { left: 5cqw; right: 26cqw; bottom: -10cqh; transform: perspective(160em) rotateY(6deg) rotateX(3deg); }
.sh-pinn { position: absolute; z-index: 3; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50% 50% 50% 0; background: var(--vurgu); color: #fff; font-style: normal; font-weight: 700; font-size: max(9px, .85em); box-shadow: 0 0 0 2px #fff, var(--gol2); }
.sh-pinn--1 { right: 22%; top: 44%; }
.sh-pinn--2 { left: 36%; top: 15%; }
.sh-yk { z-index: 4; display: flex; gap: .6em; width: min(42cqw, 16em); padding: .7em .85em; }
.sh-yk > div { flex: 1; min-width: 0; }
.sh-yk p { margin-top: .15em; line-height: 1.3; }
.sh-yk__u { display: flex; align-items: baseline; gap: .45em; }
.sh-yk--1 { right: 4cqw; top: calc(var(--ust) + 10cqh); }
.sh-yk--2 { right: 7cqw; top: calc(var(--ust) + 10cqh + 6.4em); }
.sh-duz__hak { position: absolute; z-index: 5; right: 4cqw; bottom: 7cqh; background: #14161a; color: #fff; padding: .5em .85em; box-shadow: var(--gol2); }
.sh-reel-kap--duz { right: auto; left: 10cqw; }
@container sahne (min-aspect-ratio: 1/1) { .sh-yk--v { right: auto; left: calc(10cqw + var(--vw) - 1.5em); } .sh-yk--v.sh-yk--1 { top: calc(var(--ust) + 16cqh); } .sh-duz__hak { right: auto; left: calc(10cqw + var(--vw) + 1em); top: calc(var(--ust) + 4cqh); bottom: auto; } }
@container sahne (max-aspect-ratio: 1/1) {
  .sh-pen--duz { right: 5cqw; bottom: 36cqh; }
  .sh-yk { width: 72cqw; }
  .sh-yk--1 { right: 5cqw; top: auto; bottom: calc(9cqh + 6em); }
  .sh-yk--2 { right: 12cqw; top: auto; bottom: 9cqh; }
  .sh-duz__hak { bottom: auto; top: calc(var(--ust) + 2cqh); right: 6cqw; }
  .sh-reel-kap--duz { left: calc(50% - var(--vw) / 2); }
}
@container sahne (max-height: 260px) { .sh-duz__hak { display: none; } .sh-yk--2 { top: calc(var(--ust) + 6cqh + 5.6em); } .sh-yk--1 { top: calc(var(--ust) + 4cqh); } }

/* yayın: üç katman */
.sh-iso-kap { position: absolute; left: 0; right: 0; top: var(--ust); bottom: 0; perspective: 220em; }
.sh-iso {
  --iw: min(50cqw, 80cqh);
  position: absolute;
  left: 50%;
  top: 44%;
  width: var(--iw);
  height: calc(var(--iw) * .78);
  margin: calc(var(--iw) * -.39) 0 0 calc(var(--iw) * -.5);
  transform-style: preserve-3d;
  transform: rotateX(40deg) rotateZ(-24deg);
}
.sh-iso__k { position: absolute; transform-style: preserve-3d; }
.sh-iso__k--3 { left: 56%; top: -10%; width: 48%; height: 100%; transform: translateZ(0); }
.sh-iso__k--2 { left: 26%; top: 30%; width: 38%; height: 62%; transform: translateZ(3.5em); }
.sh-iso__k--1 { left: -18%; top: 4%; width: 60%; height: 64%; transform: translateZ(7em); }
.sh-katman { position: relative; width: 100%; height: 100%; padding: 1em; border-radius: var(--r); background: var(--yuzey); color: var(--yazi); box-shadow: -1.4em 2em 2.4em -.4em rgb(0 0 0 / calc(.55 * var(--golge))), inset 0 0 0 1px rgb(255 255 255 / .5); display: flex; flex-direction: column; gap: .5em; overflow: hidden; }
.sh-katman__et { display: inline-flex; align-self: flex-start; align-items: center; gap: .3em; padding: .2em .6em; border-radius: 1em; background: var(--ince2); color: var(--soluk); font-size: max(9px, .75em); font-weight: 650; white-space: nowrap; }
.sh-katman__et .sh-ik { width: 1em; height: 1em; }
.sh-katman--g > b { font-size: 1.3em; letter-spacing: -.02em; line-height: 1.1; }
.sh-g__s { display: flex; align-items: center; gap: .3em; font-size: max(9px, .85em); white-space: nowrap; }
.sh-g__s .sh-yesil { font-weight: 700; }
.sh-g__s .sh-cz { flex: 1; }
.sh-g__d { display: flex; gap: .35em; margin-top: auto; }
.sh-g__d > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .45em .2em; border-radius: var(--r2); background: color-mix(in srgb, var(--vurgu) 10%, transparent); color: var(--vurgu); font-size: max(9px, .7em); font-weight: 650; white-space: nowrap; }
.sh-katman--q { align-items: center; text-align: center; background: #15171b; color: #fff; }
.sh-katman--q .sh-katman__et { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .7); align-self: center; }
.sh-katman--q .sh-qr { width: 70%; border-radius: .3em; }
.sh-katman--q > b { font-size: max(9px, .85em); }
.sh-katman--l { background: var(--kagit); padding: 1em 1.1em; }
.sh-l__b { font: 700 1.2em/1.1 Georgia, "Times New Roman", serif; margin-bottom: .2em; }
.sh-l__s { display: flex; align-items: baseline; gap: .3em; font-size: max(9px, .9em); white-space: nowrap; }
.sh-l__s > i { flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--yazi) 35%, transparent); transform: translateY(-.25em); }
@container sahne (max-aspect-ratio: 1/1) { .sh-iso { --iw: min(62cqw, 52cqh); top: 40%; } }
@container sahne (min-aspect-ratio: 3/2) { .sh-iso { --iw: min(48cqw, 80cqh); } }

/* panel */
.sh-pen--panel { left: 8cqw; right: 6cqw; border-radius: calc(var(--kose) * .75em) calc(var(--kose) * .75em) 0 0; }
.sh-pn, .sh-rp { padding: .85em 1.1em; display: flex; flex-direction: column; gap: .5em; }
.sh-pn .sh-liste__ekle { padding: .5em; font-size: max(9px, .88em); }
.sh-pn__bas { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .15em; }
.sh-pn__bas > b { font-size: 1.12em; white-space: nowrap; }
.sh-pn__th { display: grid; grid-template-columns: 1fr 7em 3.5em; padding: 0 .55em; font-size: max(9px, .75em); color: var(--soluk); font-weight: 650; }
.sh-pn__th span:first-child { padding-left: 3em; }
.sh-pn__s { display: grid; grid-template-columns: 2.4em 1fr 7em 3.5em; align-items: center; gap: .6em; padding: .45em .55em; border-radius: var(--r2); background: var(--ince); }
.sh-pn__s b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-pn__f { display: flex; align-items: center; height: 2em; padding: 0 .6em; border-radius: calc(var(--kose) * .45em); background: var(--yuzey); border: 1px solid var(--cizgi); font-weight: 650; white-space: nowrap; }
.sh-pn__s--duz { background: color-mix(in srgb, var(--vurgu) 7%, var(--yuzey)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vurgu) 30%, transparent); }
.sh-pn__f--duz { border-color: var(--vurgu); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--vurgu) 18%, transparent); }
.sh-pn__s .sh-anahtar { justify-self: end; }
.sh-rp__gun { display: flex; gap: .35em; }
.sh-rp__gun > span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .35em 0; border-radius: var(--r2); background: var(--ince); color: var(--soluk); font-size: max(9px, .75em); font-weight: 600; }
.sh-rp__gun b { color: var(--yazi); font-size: 1.25em; }
.sh-rp__gun--a { background: var(--yazi) !important; color: color-mix(in srgb, var(--yuzey) 70%, transparent) !important; }
.sh-rp__gun--a b { color: var(--yuzey); }
.sh-rp__s { --r: var(--vurgu); display: grid; grid-template-columns: 3.6em 1fr auto; align-items: center; gap: .6em; padding: .5em .6em; border-radius: var(--r2); background: color-mix(in srgb, var(--r) 9%, var(--yuzey)); box-shadow: inset .22em 0 0 var(--r); }
.sh-rp__s > div { display: flex; flex-direction: column; min-width: 0; }
.sh-rp__s b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-rp__saat { font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-rp__s > .sh-ik { color: var(--soluk); }
.sh-rp__s--suruk { transform: translateX(1.4em) rotate(-1.5deg); box-shadow: inset .22em 0 0 var(--r), var(--gol); background: var(--yuzey); }
@container sahne (max-width: 360px) { .sh-pn__th { display: none; } .sh-pn__s { grid-template-columns: 2em 1fr 5em; } .sh-pn__s .sh-anahtar { display: none; } .sh-rp__gun > span:nth-child(n+5) { display: none; } }

/* menü */
.sh-mn { display: flex; flex-direction: column; gap: .3em; }
.sh-mn__s { display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: .65em; padding: .45em 0; border-bottom: 1px solid var(--cizgi); }
.sh-mn__s > div:not(.sh-adet) { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.sh-mn__s b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-mn__s > div > span { color: var(--soluk); font-weight: 600; font-size: max(9px, .88em); }
.sh-mn__s .sh-foto { border-radius: var(--r2); }
.sh-adet { display: flex; align-items: center; gap: .1em; padding: .15em; border-radius: 2em; background: var(--vurgu); color: #fff; }
.sh-adet > i { display: grid; place-items: center; width: 1.5em; height: 1.5em; }
.sh-adet .sh-ik { width: .95em; height: .95em; stroke-width: 2.6; }
.sh-adet > b { min-width: 1em; text-align: center; font-size: max(9px, .9em); }
.sh-ekle { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px solid var(--vurgu); color: var(--vurgu); }
.sh-ekle .sh-ik { width: 1em; height: 1em; stroke-width: 2.6; }
.sh-sepet {
  position: absolute;
  z-index: 5;
  right: calc(9cqw - 3cqw);
  width: calc(var(--tw) + 6cqw);
  bottom: 7cqh;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .65em .8em .65em .65em;
  border-radius: calc(var(--kose) * 1.1em);
  background: #121417;
  color: #fff;
  box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .08);
  white-space: nowrap;
}
.sh-sepet > b { flex: 1; }
.sh-sepet > span:last-child { padding: .35em .7em; border-radius: 2em; background: var(--vurgu); font-weight: 700; }
.sh-sepet__s { position: relative; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: rgb(255 255 255 / .1); flex: none; }
.sh-sepet__s > i { position: absolute; top: -.3em; right: -.3em; display: grid; place-items: center; min-width: 1.35em; height: 1.35em; border-radius: 1em; background: var(--kirmizi); font-style: normal; font-weight: 700; font-size: max(9px, .72em); }
@container sahne (min-aspect-ratio: 3/2) { .sh-sepet { right: 8cqw; } }
@container sahne (max-aspect-ratio: 1/1) { .sh-sepet { right: auto; left: 6cqw; width: 88cqw; bottom: 6cqh; } }

/* whatsapp */
.sh-ekran--wa { background: #efe7dd; }
.sh-ekran--wa .sh-durum { background: #f7f7f7; }
.sh-wa { display: flex; flex-direction: column; height: calc(100% - 2.5em); }
.sh-wa__bas { display: flex; align-items: center; gap: .5em; padding: .35em .8em .6em; background: #f7f7f7; border-bottom: 1px solid rgb(0 0 0 / .08); color: #111; }
.sh-wa__bas > .sh-ik:first-child { color: #1f8f6a; }
.sh-wa__bas > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sh-wa__bas b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-wa__bas span { font-size: max(9px, .75em); color: #6b7280; }
.sh-wa__bas .sh-bas { width: 2em; height: 2em; }
.sh-wa__ikl { color: #1f8f6a; font-style: normal; }
.sh-wa__akis {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: .7em .7em;
  background-color: #efe7dd;
  background-image: radial-gradient(rgb(120 100 80 / .09) 1px, transparent 1.3px), radial-gradient(rgb(120 100 80 / .06) 1px, transparent 1.3px);
  background-size: 1.6em 1.6em, 1.6em 1.6em;
  background-position: 0 0, .8em .8em;
}
.sh-wa__gun { align-self: center; padding: .2em .7em; border-radius: .6em; background: rgb(255 255 255 / .85); color: #6b7280; font-size: max(9px, .72em); font-weight: 600; margin-bottom: .3em; }
.sh-wa__b { position: relative; align-self: flex-start; max-width: 88%; padding: .45em .6em .4em; border-radius: .2em .85em .85em .85em; background: #fff; color: #111; box-shadow: 0 1px .5px rgb(0 0 0 / .13); line-height: 1.28; }
.sh-wa__b:not(.sh-wa__b--ilk) { border-radius: .85em; }
.sh-wa__b--ilk::before { content: ""; position: absolute; left: -.45em; top: 0; border: .45em solid transparent; border-top-color: #fff; border-right-color: #fff; border-width: .45em .3em .45em .3em; }
.sh-wa__b em { float: right; margin: .35em 0 -.2em .7em; font-size: max(9px, .7em); color: #8a8f98; }
.sh-wa__b:first-of-type span { font-weight: 650; }
.sh-wa__yaz { align-self: flex-start; display: flex; gap: .25em; padding: .65em .75em; border-radius: .85em; background: #fff; box-shadow: 0 1px .5px rgb(0 0 0 / .13); }
.sh-wa__yaz > i { width: .42em; height: .42em; border-radius: 50%; background: #a3a8b0; }
.sh-bildk {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: .65em;
  width: min(46cqw, 19em);
  padding: .7em .8em;
  border-radius: calc(var(--kose) * 1.1em);
  background: rgb(250 250 250 / .94);
  color: #111;
  box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .6);
  backdrop-filter: blur(10px);
}
.sh-bildk > div { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: max(9px, .9em); }
.sh-bildk > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3d4148; }
.sh-bildk__u { display: flex; justify-content: space-between; font-size: max(9px, .78em); color: #6b7280; }
.sh-bildk__u b { font-weight: 600; letter-spacing: .02em; }
.sh-bildk__ik { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: .6em; background: #25a36b; color: #fff; }
.sh-bildk__ik .sh-ik { width: 1.3em; height: 1.3em; }
@container sahne (max-aspect-ratio: 13/10) { .sh-bildk { width: min(60cqw, 19em); } }
@container sahne (max-aspect-ratio: 1/1) { .sh-bildk { width: 88cqw; left: 6cqw; } }

/* tanıtım: masa kartı, etiket, poşet */
.sh-cadir { position: absolute; z-index: 3; left: calc(50% - min(34cqw, 50cqh) / 2 - 6cqw); top: calc(var(--ust) + 1cqh); width: min(34cqw, 50cqh); perspective: 60em; }
.sh-cadir__y {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  padding: 1em 1em 1.1em;
  border-radius: calc(var(--kose) * .5em) calc(var(--kose) * .5em) .15em .15em;
  background: linear-gradient(180deg, var(--kagit), color-mix(in srgb, var(--kagit) 88%, #000));
  text-align: center;
  transform: rotateY(-20deg) rotateX(6deg);
  box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .6);
}
.sh-cadir__y::before { content: ""; position: absolute; top: 0; bottom: 0; right: -.7em; width: .8em; background: linear-gradient(90deg, color-mix(in srgb, var(--kagit) 60%, #000), color-mix(in srgb, var(--kagit) 40%, #000)); transform: skewY(-28deg); transform-origin: 0 0; border-radius: 0 .2em .2em 0; }
.sh-cadir__y b { font-size: 1.15em; line-height: 1.15; }
.sh-cadir__y .sh-k { letter-spacing: .08em; font-weight: 650; color: var(--vurgu); }
.sh-cadir__y .sh-qr { width: 70%; }
.sh-cadir__a { display: inline-flex; align-items: center; gap: .35em; font-size: max(9px, .78em); color: var(--soluk); white-space: nowrap; }
.sh-cadir__g { position: absolute; left: 4%; right: -10%; bottom: -1.2em; height: 1.4em; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); z-index: -1; }
.sh-etiket { position: absolute; z-index: 4; left: calc(50% + min(34cqw, 50cqh) / 2 - 8cqw); bottom: 6cqh; width: 7.5em; height: 7.5em; border-radius: 50%; background: var(--vurgu); color: #fff; box-shadow: var(--gol2); display: grid; place-items: center; rotate: 10deg; }
.sh-etiket > div { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.sh-etiket .sh-qr { width: 3.4em; border-radius: .2em; }
.sh-etiket b { font-size: max(9px, .78em); white-space: nowrap; }
.sh-torba { position: absolute; z-index: 1; left: 5cqw; bottom: -6cqh; width: min(30cqw, 12em); height: min(46cqh, 14em); border-radius: .3em .3em 0 0; background: linear-gradient(100deg, #c99c6a, #b9874f 60%, #a9773f); box-shadow: var(--gol); display: flex; align-items: center; justify-content: center; rotate: -8deg; }
.sh-torba > span { padding: .4em .7em; border-radius: .3em; background: rgb(255 255 255 / .85); color: #5a3a1c; font: italic 700 max(9px, .9em) Georgia, serif; white-space: nowrap; }
.sh-torba__kulp { position: absolute; top: -1.6em; left: 30%; width: 40%; height: 2.2em; border: .35em solid #8b6236; border-bottom: 0; border-radius: 2em 2em 0 0; }
.sh-tarama { z-index: 5; right: 4cqw; top: calc(var(--ust) + 8cqh); display: flex; align-items: center; gap: .7em; width: max-content; padding: .6em .85em .6em .6em; }
.sh-tarama > div:last-child { display: flex; flex-direction: column; }
.sh-tarama__v { position: relative; width: 2.8em; height: 2.8em; padding: .3em; border-radius: .5em; background: #111; }
.sh-tarama__v .sh-qr { opacity: .9; }
.sh-tarama__c { position: absolute; inset: -.15em; border-radius: .6em; box-shadow: inset 0 0 0 2px var(--sari); clip-path: polygon(0 0, 35% 0, 35% 8%, 8% 8%, 8% 35%, 0 35%, 0 65%, 8% 65%, 8% 92%, 35% 92%, 35% 100%, 65% 100%, 65% 92%, 92% 92%, 92% 65%, 100% 65%, 100% 35%, 92% 35%, 92% 8%, 65% 8%, 65% 0, 100% 0, 100% 100%, 0 100%); }
@container sahne (max-width: 420px) { .sh-tarama { display: none; } .sh-cadir { left: calc(50% - min(44cqw, 52cqh) / 2 + 4cqw); width: min(44cqw, 52cqh); } .sh-etiket { left: auto; right: 4cqw; width: 6.2em; height: 6.2em; } }
@container sahne (max-aspect-ratio: 1/1) { .sh-cadir { width: 56cqw; left: 22cqw; } .sh-torba { width: 36cqw; height: 30cqh; } .sh-etiket { right: 5cqw; bottom: 4cqh; } }

/* rapor */
.sh-rapor { z-index: 3; right: 7cqw; top: calc(var(--ust) + 3cqh); width: min(64cqw, 24em); padding: 1em 1.15em .9em; display: flex; flex-direction: column; gap: .3em; transform: perspective(120em) rotateY(-8deg) rotateX(4deg); }
.sh-rapor__u { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.sh-rapor__u .sh-k { font-weight: 600; white-space: nowrap; }
.sh-rapor__d { font-size: 2.6em; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sh-graf { position: relative; color: var(--vurgu); margin-top: .3em; }
.sh-graf svg { display: block; width: 100%; height: 6.8em; overflow: visible; }
.sh-graf__iz { stroke: var(--cizgi); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.sh-graf__cizgi { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.sh-graf__nokta { position: absolute; right: -.45em; top: calc(12 / 90 * 6.8em - .45em); width: .9em; height: .9em; border-radius: 50%; background: var(--yuzey); box-shadow: 0 0 0 .22em currentColor, 0 0 0 .55em color-mix(in srgb, currentColor 22%, transparent); }
.sh-graf__x { display: flex; justify-content: space-between; margin-top: .35em; font-size: max(9px, .72em); color: var(--soluk); }
.sh-cub { display: flex; flex-direction: column; gap: .5em; margin-top: .4em; }
.sh-cub__s { display: grid; grid-template-columns: 8em 1fr; align-items: center; gap: .6em; font-size: max(9px, .88em); }
.sh-cub__s > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-cub__s > i { display: block; height: .7em; border-radius: 1em; background: color-mix(in srgb, var(--yazi) 7%, transparent); overflow: hidden; }
.sh-cub__s > i > i { display: block; height: 100%; border-radius: inherit; background: var(--vurgu); }
.sh-cub__s:nth-child(n+2) > i > i { background: color-mix(in srgb, var(--vurgu) 60%, var(--yuzey)); }
.sh-rapor-arka { z-index: 2; left: 6cqw; top: calc(var(--ust) + 14cqh); width: min(34cqw, 14em); display: flex; align-items: center; gap: .9em; transform: perspective(120em) rotateY(14deg) rotateZ(-4deg); filter: brightness(.9); }
.sh-rapor-arka > div:last-child { flex: 1; }
.sh-donut { width: 3.6em; height: 3.6em; flex: none; }
.sh-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh-donut circle { fill: none; stroke-width: 6; }
.sh-donut__z { stroke: color-mix(in srgb, var(--yazi) 8%, transparent); }
.sh-donut__a { stroke: var(--vurgu); }
.sh-donut__b { stroke: var(--sari); }
.sh-rapor-e { z-index: 4; left: 9cqw; bottom: 7cqh; display: flex; align-items: center; gap: .6em; padding: .6em .85em .6em .7em; }
.sh-rapor-e > .sh-ik { color: var(--vurgu); width: 1.5em; height: 1.5em; }
.sh-rapor-e > div { display: flex; flex-direction: column; }
.sh-rapor-e b { white-space: nowrap; }
@container sahne (max-aspect-ratio: 13/10) { .sh-rapor-arka, .sh-rapor-e { display: none; } .sh-rapor { right: auto; left: calc(50% - min(82cqw, 24em) / 2); width: min(82cqw, 24em); } }
@container sahne (max-height: 250px) { .sh-graf svg { height: 4.6em; } .sh-graf__nokta { top: calc(12 / 90 * 4.6em - .45em); } .sh-cub__s:nth-child(n+4) { display: none; } }

/* takvim */
.sh-tk__hiz { display: flex; align-items: center; gap: .6em; padding: .55em .65em; border-radius: var(--r2); background: var(--ince); }
.sh-tk__hiz > div { display: flex; flex-direction: column; }
.sh-tk__ay { display: flex; align-items: center; justify-content: space-between; }
.sh-tk__ay span { display: flex; gap: .4em; color: var(--soluk); }
.sh-hft { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2em; }
.sh-hft > span { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .35em 0; border-radius: var(--r2); font-size: max(9px, .72em); color: var(--soluk); font-weight: 600; }
.sh-hft b { font-size: 1.3em; color: var(--yazi); }
.sh-hft--a { background: var(--vurgu); color: rgb(255 255 255 / .8) !important; }
.sh-hft--a b { color: #fff; }
.sh-hft--k { opacity: .45; }
.sh-slotlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.sh-slot { display: grid; place-items: center; height: 2.1em; border-radius: var(--r2); border: 1px solid color-mix(in srgb, var(--vurgu) 35%, transparent); color: var(--vurgu); font-weight: 650; font-size: max(9px, .9em); font-variant-numeric: tabular-nums; }
.sh-slot--dolu { border-color: transparent; background: var(--ince); color: color-mix(in srgb, var(--yazi) 30%, transparent); text-decoration: line-through; }
.sh-slot--sec { background: var(--vurgu); border-color: var(--vurgu); color: #fff; box-shadow: 0 .3em .7em -.2em color-mix(in srgb, var(--vurgu) 70%, transparent); }
.sh-tk__tarih { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 2.6em; height: 2.8em; border-radius: .5em; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--cizgi); overflow: hidden; font-style: normal; }
.sh-tk__tarih span { width: 100%; text-align: center; background: var(--kirmizi); color: #fff; font-size: max(9px, .6em); font-weight: 700; letter-spacing: .05em; padding: .1em 0; }
.sh-tk__tarih b { font-size: 1.2em; line-height: 1.3; }

/* bildirim: kilit ekranı */
.sh-ekran--kilit { background: radial-gradient(120% 70% at 20% 0%, #4767c9 0%, transparent 60%), radial-gradient(90% 60% at 100% 40%, #9b4bb3 0%, transparent 55%), linear-gradient(170deg, #22305f, #141a2e 55%, #0c0f1a); }
.sh-kilitek { display: flex; flex-direction: column; gap: .55em; padding: 0 .8em; color: #fff; }
.sh-kilitek__s { display: flex; flex-direction: column; align-items: center; padding: .3em 0 .9em; }
.sh-kilitek__s .sh-ik { width: 1em; height: 1em; opacity: .85; }
.sh-kilitek__s > span { font-size: max(9px, .85em); font-weight: 600; opacity: .85; margin-top: .3em; }
.sh-kilitek__s > b { font-size: 4.2em; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.sh-kb { display: flex; gap: .6em; padding: .7em .75em; border-radius: calc(var(--kose) * 1.1em); background: rgb(255 255 255 / .82); color: #111; backdrop-filter: blur(12px); box-shadow: 0 .4em 1em -.4em rgb(0 0 0 / .4); }
.sh-kb > div { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: max(9px, .9em); line-height: 1.25; }
.sh-kb__u { display: flex; justify-content: space-between; gap: .4em; font-size: max(9px, .85em); }
.sh-kb__u span { color: #6b7280; white-space: nowrap; }
.sh-kb__ik { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: .55em; background: var(--vurgu); color: #fff; }
.sh-kb__ik--2 { background: #f08a24; }
.sh-tel--orta { }
@container sahne (min-aspect-ratio: 13/10) { .sh-tel--orta { right: auto; left: calc(50% - var(--tw) / 2 + 6cqw); } }

/* sohbet */
.sh-pen--arka { left: 4cqw; right: 30cqw; bottom: 16cqh; border-radius: calc(var(--kose) * .75em); opacity: .55; filter: blur(.5px); }
.sh-bulanik { padding: 1.2em 1.3em; display: flex; flex-direction: column; }
.sh-bulanik .sh-cz { height: .8em; }
.sh-bulanik__k { display: flex; gap: .7em; margin-top: 1em; }
.sh-bulanik__k > i { flex: 1; height: 5em; border-radius: var(--r2); background: var(--ince2); }
.sh-sohbet { z-index: 4; right: 7cqw; top: calc(var(--ust) + 2cqh); width: min(56cqw, 21em); padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: calc(var(--kose) * 1.1em); transform: perspective(120em) rotateY(-6deg); }
.sh-sohbet__bas { display: flex; align-items: center; gap: .6em; padding: .75em .9em; background: var(--yazi); color: var(--yuzey); }
.sh-sohbet__bas > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sh-sohbet__bas > div > span { display: flex; align-items: center; gap: .35em; font-size: max(9px, .75em); opacity: .75; }
.sh-sohbet__bas > div > span i { width: .5em; height: .5em; border-radius: 50%; background: #3ddc84; }
.sh-sohbet__bas .sh-cip { background: rgb(255 255 255 / .14); color: inherit; }
.sh-sohbet__av { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: linear-gradient(135deg, var(--vurgu), color-mix(in srgb, var(--vurgu) 50%, #b46cd8)); color: #fff; }
.sh-sohbet__akis { display: flex; flex-direction: column; gap: .45em; padding: .8em .8em .6em; }
.sh-sb { max-width: 84%; padding: .55em .75em; border-radius: 1em; line-height: 1.3; }
.sh-sb--ben { align-self: flex-end; background: var(--vurgu); color: #fff; border-bottom-right-radius: .3em; }
.sh-sb--o { align-self: flex-start; background: var(--ince2); border-bottom-left-radius: .3em; }
.sh-sohbet__oneri { display: flex; gap: .35em; flex-wrap: wrap; margin-top: .2em; }
.sh-sohbet__oneri span { padding: .3em .7em; border-radius: 2em; box-shadow: inset 0 0 0 1px var(--cizgi); font-size: max(9px, .78em); font-weight: 600; color: var(--vurgu); }
.sh-sohbet__yaz { display: flex; align-items: center; justify-content: space-between; margin: 0 .7em .7em; padding: .45em .5em .45em .9em; border-radius: 2em; background: var(--ince); color: var(--soluk); font-size: max(9px, .85em); }
.sh-sohbet__yaz i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--vurgu); color: #fff; }
.sh-sohbet__yaz .sh-ik { width: 1em; height: 1em; }
.sh-sohbet__dugme { position: absolute; z-index: 5; right: calc(7cqw - 1.2em); bottom: 6cqh; display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; background: var(--vurgu); color: #fff; box-shadow: var(--gol2), 0 0 0 .3em color-mix(in srgb, var(--vurgu) 25%, transparent); }
.sh-sohbet__dugme .sh-ik { width: 1.5em; height: 1.5em; }
@container sahne (max-aspect-ratio: 13/10) { .sh-sohbet { width: 84cqw; right: 8cqw; } .sh-sohbet__dugme { display: none; } }
@container sahne (max-height: 260px) { .sh-sohbet__oneri { display: none; } }

/* video */
.sh-reel-kap { position: absolute; z-index: 3; right: 10cqw; top: calc(var(--ust) + 1cqh); width: var(--vw); height: calc(var(--vw) * 1.78); border-radius: calc(var(--kose) * 1.1em); overflow: hidden; box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .1); transform: perspective(100em) rotateY(-10deg) rotateZ(1.5deg); }
.sh-reel { position: relative; width: 100%; height: 100%; color: #fff; background: radial-gradient(80% 60% at 50% 45%, #6d4a2c, #2b1b12 70%, #160e09); }
.sh-reel__cizim { position: absolute; left: 6%; right: 6%; top: 22%; aspect-ratio: 1; }
.sh-reel__ust { position: absolute; left: 0; right: 0; top: 0; padding: .7em .8em; display: flex; flex-direction: column; gap: .7em; background: linear-gradient(rgb(0 0 0 / .45), transparent); }
.sh-reel__ust b { font-size: 1.1em; line-height: 1.15; text-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.sh-reel__ilerle { display: block; height: .22em; border-radius: 1em; background: rgb(255 255 255 / .3); overflow: hidden; }
.sh-reel__ilerle > i { display: block; width: 42%; height: 100%; background: #fff; }
.sh-reel__yan { position: absolute; right: .55em; bottom: 34%; display: flex; flex-direction: column; gap: .8em; }
.sh-reel__yan span { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: rgb(0 0 0 / .3); }
.sh-reel__yan span:first-child { color: #ff4d6a; }
.sh-reel__yan span:first-child .sh-ik { fill: currentColor; }
.sh-reel__alt { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6em .8em .8em; display: flex; flex-direction: column; gap: .4em; background: linear-gradient(transparent, rgb(0 0 0 / .65)); }
.sh-reel__alt b { font-size: 1.15em; line-height: 1.15; }
.sh-reel__muzik { display: inline-flex; align-items: center; gap: .35em; font-size: max(9px, .75em); opacity: .9; white-space: nowrap; overflow: hidden; }
.sh-reel__muzik .sh-ik { width: 1em; height: 1em; }
.sh-dalgaf { display: flex; align-items: center; gap: 2px; height: 1em; }
.sh-dalgaf > i { flex: 1; height: 100%; border-radius: 1px; background: rgb(255 255 255 / .75); transform-origin: 50% 50%; }
.sh-dalgaf > i:nth-child(3n) { height: 45%; } .sh-dalgaf > i:nth-child(3n+1) { height: 80%; } .sh-dalgaf > i:nth-child(5n) { height: 30%; } .sh-dalgaf > i:nth-child(7n) { height: 100%; }
.sh-dalgaf > i:nth-child(2n) { --i: 2; } .sh-dalgaf > i:nth-child(3n) { --i: 5; } .sh-dalgaf > i:nth-child(5n) { --i: 8; }
.sh-kurgu { z-index: 2; left: 6cqw; bottom: 9cqh; width: min(56cqw, 23em); padding: .75em .85em .85em; display: flex; flex-direction: column; gap: .55em; background: #17191d; color: #fff; box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .08); }
.sh-kurgu__u { display: flex; justify-content: space-between; align-items: baseline; }
.sh-kurgu__u .sh-k { color: rgb(255 255 255 / .55); }
.sh-kurgu__iz { position: relative; display: flex; flex-direction: column; gap: .35em; }
.sh-kurgu__klip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; border-radius: .4em; background: #f2b84b; }
.sh-kurgu__klip .sh-foto { aspect-ratio: 1.4; border-radius: .25em; }
.sh-kurgu__yazi { align-self: flex-start; margin-left: 18%; padding: .2em .6em; border-radius: .3em; background: #7b5cf0; font-size: max(9px, .75em); font-weight: 650; white-space: nowrap; }
.sh-dalgaf--kurgu { height: 1.4em; padding: .2em .4em; border-radius: .3em; background: rgb(61 204 140 / .25); }
.sh-dalgaf--kurgu > i { background: #3dcc8c; }
.sh-kurgu__oynatici { position: absolute; left: 40%; top: -.3em; bottom: -.3em; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .3); }
.sh-kurgu__oynatici::before { content: ""; position: absolute; top: -.2em; left: -.35em; width: .75em; height: .75em; border-radius: .15em; background: #fff; }
@container sahne (min-aspect-ratio: 14/10) { .sh-ic { --vw: min(32cqw, 54cqh); } }
@container sahne (max-aspect-ratio: 13/10) { .sh-kurgu { display: none; } .sh-reel-kap { right: auto; left: calc(50% - var(--vw) / 2); } }
@container sahne (max-aspect-ratio: 1/1) { .sh-ic { --vw: min(66cqw, 46cqh); } }

/* paylaşım */
.sh-ig { z-index: 4; right: 10cqw; top: calc(var(--ust) + 1cqh); width: min(42cqw, 52cqh); padding: 0; overflow: hidden; border-radius: calc(var(--kose) * .9em); transform: perspective(100em) rotateY(-8deg) rotateZ(1deg); }
.sh-ig__bas { display: flex; align-items: center; gap: .55em; padding: .6em .75em; }
.sh-ig__bas > div { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sh-ig__bas b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(9px, .92em); }
.sh-ig__av { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; padding: .14em; background: conic-gradient(from 200deg, #f9b233, #e9473e, #c2348f, #f9b233); }
.sh-ig__av > i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #7a4a2a; color: #fff; border: .13em solid var(--yuzey); font-style: normal; font-weight: 700; font-size: max(9px, .8em); }
.sh-ig__gorsel { position: relative; aspect-ratio: 1; background: radial-gradient(80% 80% at 50% 40%, #c9a37a, #8a6141 70%, #5b3d27); padding: 8%; }
.sh-ig__kalp { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; color: #fff; opacity: 0; filter: drop-shadow(0 .3em .6em rgb(0 0 0 / .35)); }
.sh-ig__kalp .sh-ik { width: 100%; height: 100%; fill: #fff; stroke: none; }
.sh-ig__d { display: flex; align-items: center; gap: .8em; padding: .6em .75em .3em; }
.sh-ig__d .sh-ik { width: 1.35em; height: 1.35em; }
.sh-ig__k { color: #ed3a56; display: inline-flex; }
.sh-ig__k .sh-ik { fill: currentColor; }
.sh-ig__bos { flex: 1; }
.sh-ig__beg { display: block; padding: 0 .75em; font-size: max(9px, .9em); }
.sh-ig__ac { padding: .2em .75em .8em; font-size: max(9px, .85em); color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ig__ac b { color: var(--yazi); }
.sh-dikey { position: absolute; z-index: 2; width: min(22cqw, 32cqh); aspect-ratio: 9 / 16; top: calc(var(--ust) + 8cqh); border-radius: calc(var(--kose) * .9em); overflow: hidden; background: radial-gradient(80% 60% at 50% 45%, #6d4a2c, #20140d 75%); box-shadow: var(--gol); padding: 0; color: #fff; }
.sh-dikey > b { position: absolute; left: .7em; top: .6em; font-size: max(9px, .8em); opacity: .85; }
.sh-dikey .sh-cizim { position: absolute; left: 8%; top: 24%; width: 84%; height: auto; }
.sh-dikey__alt { position: absolute; left: .7em; right: 2.6em; bottom: .9em; display: flex; flex-direction: column; gap: .35em; }
.sh-dikey__alt i { height: .45em; border-radius: 1em; background: rgb(255 255 255 / .7); }
.sh-dikey__alt i + i { width: 60%; background: rgb(255 255 255 / .4); }
.sh-dikey__yan { position: absolute; right: .55em; bottom: 1em; display: flex; flex-direction: column; gap: .5em; }
.sh-dikey__yan i { width: 1.3em; height: 1.3em; border-radius: 50%; background: rgb(255 255 255 / .3); }
.sh-dikey--1 { right: calc(10cqw + min(42cqw, 52cqh) - 5cqw); transform: perspective(80em) rotateY(18deg) rotateZ(-7deg); filter: brightness(.75); }
.sh-dikey--2 { right: calc(10cqw + min(42cqw, 52cqh) + 9cqw); transform: perspective(80em) rotateY(22deg) rotateZ(-12deg); filter: brightness(.55); top: calc(var(--ust) + 16cqh); }
@container sahne (max-aspect-ratio: 13/10) { .sh-dikey--2 { display: none; } .sh-ig { width: min(56cqw, 54cqh); right: 8cqw; } .sh-dikey--1 { right: calc(8cqw + min(56cqw, 54cqh) - 10cqw); width: min(30cqw, 34cqh); } }
@container sahne (max-aspect-ratio: 1/1) { .sh-ig { width: 72cqw; right: 6cqw; } .sh-dikey--1 { right: auto; left: 4cqw; top: calc(var(--ust) + 30cqh); } }

/* sadakat */
.sh-sk { --sk: #5a3a24; position: relative; display: flex; flex-direction: column; gap: .75em; padding: 1em 1.05em; border-radius: var(--r); color: #fff; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sk) 55%, #fff) 0%, transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--sk) 85%, #fff), var(--sk) 45%, color-mix(in srgb, var(--sk) 70%, #000)); box-shadow: 0 .6em 1.4em -.5em rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .15); overflow: hidden; }
.sh-sk::after { content: ""; position: absolute; right: -2.5em; bottom: -2.5em; width: 7em; height: 7em; border-radius: 50%; border: 1.4em solid rgb(255 255 255 / .06); }
.sh-sk__u { display: flex; justify-content: space-between; align-items: flex-start; gap: .5em; }
.sh-sk__u > div { display: flex; flex-direction: column; min-width: 0; }
.sh-sk__u b { font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sk__u span { font-size: max(9px, .75em); opacity: .7; }
.sh-sk__say { padding: .2em .6em; border-radius: 1em; background: rgb(255 255 255 / .16); font-weight: 700; font-size: max(9px, .85em) !important; opacity: 1 !important; white-space: nowrap; }
.sh-sk__d { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: .45em; }
.sh-damga { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .35); color: #5a3a24; }
.sh-damga .sh-ik { width: 58%; height: 58%; }
.sh-damga--d { border: 0; background: #f6e7cf; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12); }
.sh-damga--odul:not(.sh-damga--d) { border-style: solid; border-color: var(--sari); color: var(--sari); }
.sh-sk__o { position: relative; z-index: 1; display: flex; align-items: center; gap: .45em; font-size: max(9px, .85em); font-weight: 600; }
.sh-sk__o .sh-ik { color: var(--sari); }
.sh-ap--cuzdan { background: var(--ince); min-height: 100%; }
.sh-sk__alt { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .7em .8em; border-radius: var(--r2); background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--cizgi); }
.sh-sk__alt > div { display: flex; flex-direction: column; }
.sh-sk__alt .sh-qr { width: 3.2em; }
.sh-sk-yelpaze { position: absolute; left: 0; right: 0; top: calc(var(--ust) + 4cqh); bottom: 0; perspective: 90em; }
.sh-sk-y { position: absolute; left: 50%; top: 0; width: min(56cqw, 21em); margin-left: calc(min(56cqw, 21em) / -2); transform-origin: 50% 140%; }
.sh-sk-y--1 { transform: rotateZ(-14deg) translateX(-10%); filter: brightness(.7); }
.sh-sk-y--2 { transform: rotateZ(-6deg) translateX(-4%) translateY(2%); filter: brightness(.85); }
.sh-sk-y--3 { transform: rotateZ(4deg) translateY(4%); }
.sh-sk-y--3 .sh-sk { box-shadow: var(--gol), 0 0 0 .2em var(--sari); }
.sh-sk-y__ok { position: absolute; right: -.7em; top: -.7em; z-index: 2; box-shadow: 0 0 0 .2em var(--zemin); }
@container sahne (max-height: 260px) { .sh-sk-y .sh-sk__o { display: none; } }

/* kilit */
.sh-ap--orta { align-items: center; text-align: center; padding-top: 1em; }
.sh-kilit__ik { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: color-mix(in srgb, var(--vurgu) 12%, transparent); color: var(--vurgu); }
.sh-kilit__ik .sh-ik { width: 1.5em; height: 1.5em; }
.sh-kilit__b { font-size: 1.15em; }
.sh-kod { display: flex; gap: .3em; margin: .3em 0; width: 100%; justify-content: center; }
.sh-kod__k { display: grid; place-items: center; flex: 1; max-width: 2.3em; height: 2.7em; border-radius: var(--r2); background: var(--ince); box-shadow: inset 0 0 0 1px var(--cizgi); font-style: normal; font-weight: 700; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.sh-kod__k:nth-child(3) { margin-right: .35em; }
.sh-kod__k--a { box-shadow: inset 0 0 0 1.5px var(--vurgu), 0 0 0 .2em color-mix(in srgb, var(--vurgu) 18%, transparent); background: var(--yuzey); }
.sh-ap--orta > .sh-btn { width: 100%; }
.sh-kilit__a { color: var(--vurgu); font-weight: 600; }
.sh-hesaplar { width: min(44cqw, 15em); padding: .8em .85em; display: flex; flex-direction: column; gap: .45em; }
.sh-hesaplar__u { display: flex; align-items: center; gap: .45em; padding-bottom: .4em; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.sh-hesaplar__u .sh-ik { color: var(--yesil); }
.sh-hesaplar__u b { flex: 1; }
.sh-hesaplar__s { display: flex; align-items: center; gap: .55em; white-space: nowrap; }
.sh-hesaplar__s > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sh-hesaplar__ik { --b: #6b7280; display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: .5em; background: var(--b); color: #fff; font-style: normal; font-weight: 700; font-size: max(9px, .8em); }
@container sahne (max-height: 260px) { .sh-hesaplar__s:nth-of-type(n+4) { display: none; } }

/* acil */
.sh-acil { z-index: 2; left: calc(50% - min(70cqw, 27em) / 2 - 4cqw); top: calc(var(--ust) + 3cqh); width: min(70cqw, 27em); overflow: hidden; transform: perspective(110em) rotateX(12deg) rotateY(8deg) rotateZ(-2.5deg); transform-origin: 50% 0; }
.sh-acil__bas { display: flex; align-items: center; gap: .7em; padding: .85em 1.1em; background: var(--kirmizi); color: #fff; }
.sh-acil__bas > .sh-ik { width: 1.9em; height: 1.9em; }
.sh-acil__bas > div { display: flex; flex-direction: column; }
.sh-acil__bas span { font-size: max(9px, .72em); letter-spacing: .1em; font-weight: 700; opacity: .85; }
.sh-acil__bas b { font-size: 1.3em; letter-spacing: -.01em; }
.sh-acil__g { display: flex; gap: 1em; padding: .85em 1.1em 1em; }
.sh-acil ol { flex: 1; list-style: none; display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.sh-acil li { display: flex; align-items: flex-start; gap: .55em; font-size: max(9px, .92em); line-height: 1.25; }
.sh-acil li > i { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: color-mix(in srgb, var(--kirmizi) 14%, transparent); color: var(--kirmizi); font-style: normal; font-weight: 800; font-size: max(9px, .8em); }
.sh-sure { position: relative; flex: none; width: 4.8em; height: 4.8em; align-self: flex-start; }
.sh-sure svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh-sure circle { fill: none; stroke-width: 4; }
.sh-sure__z { stroke: color-mix(in srgb, var(--yazi) 8%, transparent); }
.sh-sure__d { stroke: var(--kirmizi); stroke-linecap: round; stroke-dasharray: var(--C); stroke-dashoffset: calc(var(--C) * .25); }
.sh-sure > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sh-sure b { font-size: 1.5em; }
.sh-sure span { font-size: max(9px, .65em); color: var(--soluk); }
.sh-acil-not { z-index: 4; right: 4cqw; top: calc(var(--ust) + 3cqh + 11.5em); display: flex; align-items: center; gap: .6em; padding: .6em .85em .6em .6em; }
.sh-acil-not > div { display: flex; flex-direction: column; }
.sh-acil-not b { white-space: nowrap; }
@container sahne (max-width: 360px) { .sh-sure { display: none; } .sh-acil { left: 6cqw; width: 88cqw; } }
@container sahne (max-height: 260px) { .sh-acil-not { display: none; } .sh-acil li:nth-child(n+4) { display: none; } }
@container sahne (max-aspect-ratio: 1/1) { .sh-acil { left: 6cqw; width: 88cqw; } }

/* ders */
.sh-ap--ders { gap: .5em; }
.sh-oynatici { margin: 0 -.4em; border-radius: var(--r2); overflow: hidden; background: #0f1115; }
.sh-oynatici__ekran { position: relative; aspect-ratio: 16 / 9; padding: .7em; background: linear-gradient(135deg, #e9edf3, #d8dee8); }
.sh-oynatici__ui { display: flex; flex-direction: column; gap: .4em; width: 78%; padding: .55em; border-radius: .4em; background: #fff; box-shadow: 0 .3em .8em -.3em rgb(0 0 0 / .3); font-size: max(9px, .7em); }
.sh-oynatici__k { display: flex; gap: .4em; align-items: center; }
.sh-oynatici__k > div { flex: 1; }
.sh-oynatici__k .sh-bas { width: 1.8em; height: 1.8em; }
.sh-oynatici__btn { align-self: flex-start; padding: .25em .6em; border-radius: 1em; background: var(--vurgu); color: #fff; font-weight: 650; white-space: nowrap; }
.sh-oynatici__oynat { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 2.8em; height: 2.8em; margin: -1.4em 0 0 -1.4em; border-radius: 50%; background: rgb(15 17 21 / .78); color: #fff; backdrop-filter: blur(4px); }
.sh-oynatici__oynat .sh-ik { width: 1.2em; height: 1.2em; margin-left: .15em; }
.sh-oynatici__alt { display: flex; align-items: center; gap: .5em; padding: .4em .6em; color: rgb(255 255 255 / .8); font-size: max(9px, .7em); font-variant-numeric: tabular-nums; }
.sh-oynatici__alt > i { flex: 1; height: .25em; border-radius: 1em; background: rgb(255 255 255 / .25); }
.sh-oynatici__alt > i > i { display: block; width: 26%; height: 100%; border-radius: inherit; background: var(--kirmizi); }
.sh-ders__b { font-size: 1.05em; line-height: 1.2; margin-top: .2em; }
.sh-ders__l { display: flex; flex-direction: column; gap: .15em; margin-top: .3em; }
.sh-ders__s { display: flex; align-items: center; gap: .6em; padding: .45em .2em; border-top: 1px solid var(--cizgi); font-size: max(9px, .88em); white-space: nowrap; }
.sh-ders__s > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sh-ders__s > em { color: var(--soluk); font-size: max(9px, .85em); font-variant-numeric: tabular-nums; }
.sh-ders__s > i { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--ince2); color: var(--soluk); font-style: normal; font-weight: 700; font-size: max(9px, .8em); }
.sh-ders__s > i .sh-ik { width: 65%; height: 65%; stroke-width: 3; }
.sh-ders__s:first-child > i { background: var(--yesil); color: #fff; }
.sh-ders__s--a { color: var(--vurgu); font-weight: 650; }
.sh-ders__s--a > i { background: var(--vurgu); color: #fff; }
.sh-ders__s--a > i .sh-ik { stroke: none; fill: currentColor; }
.sh-ilerleme { display: flex; align-items: center; gap: .7em; padding: .65em .9em .65em .65em; }
.sh-ilerleme > div:last-child { display: flex; flex-direction: column; }
.sh-ilerleme b { white-space: nowrap; }
.sh-mini-halka { position: relative; width: 2.9em; height: 2.9em; flex: none; }
.sh-mini-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh-mini-halka circle { fill: none; stroke-width: 4; }
.sh-mh__z { stroke: color-mix(in srgb, var(--yazi) 9%, transparent); }
.sh-mh__d { stroke: var(--vurgu); stroke-linecap: round; stroke-dasharray: var(--C); stroke-dashoffset: var(--bos); }
.sh-mini-halka > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: max(9px, .72em); }

/* ödev */
.sh-odev { z-index: 4; left: 7cqw; top: calc(var(--ust) + 3cqh); width: min(52cqw, 20em); display: flex; flex-direction: column; gap: .45em; transform: perspective(100em) rotateY(8deg) rotateZ(-2deg); }
.sh-odev .sh-k { letter-spacing: .08em; font-weight: 650; color: var(--vurgu); }
.sh-odev__s { display: flex; align-items: center; gap: .6em; }
.sh-odev__s b { line-height: 1.2; }
.sh-kutu { display: grid; place-items: center; flex: none; width: 1.45em; height: 1.45em; border-radius: .35em; border: 1.5px solid var(--cizgi); }
.sh-kutu--d { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.sh-kutu .sh-ik { width: 75%; height: 75%; stroke-width: 3; }
.sh-gy { z-index: 2; right: 6cqw; top: calc(var(--ust) + 3cqh + 4.4em); width: min(52cqw, 21em); display: flex; flex-direction: column; gap: .5em; transform: perspective(100em) rotateY(-10deg) rotateZ(1.5deg); }
.sh-gy__u { display: flex; align-items: center; gap: .55em; }
.sh-gy__u > div { display: flex; flex-direction: column; gap: .15em; }
.sh-gy__c { margin-top: .3em; padding: .6em .7em; border-radius: var(--r2); background: var(--ince); border-left: .22em solid var(--vurgu); display: flex; flex-direction: column; gap: .25em; }
.sh-gy__c p { font-size: max(9px, .9em); line-height: 1.3; }
.sh-geri { z-index: 5; left: 12cqw; bottom: 7cqh; width: min(56cqw, 22em); display: flex; align-items: flex-start; gap: .6em; padding: .75em .9em; }
.sh-geri > div { flex: 1; min-width: 0; }
.sh-geri p { margin-top: .15em; font-size: max(9px, .92em); line-height: 1.3; }
.sh-geri__ok { margin-top: .2em; }
@container sahne (max-aspect-ratio: 13/10) { .sh-odev { width: 70cqw; } .sh-gy { width: 64cqw; } .sh-geri { left: 6cqw; width: 86cqw; } }
@container sahne (max-height: 260px) { .sh-gy__c { display: none; } .sh-gy .sh-cz:nth-of-type(2) { display: none; } }

/* belge */
.sh-belge { z-index: 2; left: calc(50% - min(70cqw, 30em) / 2); top: calc(var(--ust) + 4cqh); width: min(70cqw, 30em); padding: .55em; transform: perspective(110em) rotateX(14deg) rotateZ(-4deg); transform-origin: 50% 0; }
.sh-belge__c { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35em; padding: 1.1em 1.2em 1em; border: 1.5px solid color-mix(in srgb, var(--sari) 70%, #8a6a20); outline: 1px solid color-mix(in srgb, var(--sari) 40%, transparent); outline-offset: -.35em; text-align: center; }
.sh-belge__u { font-size: max(9px, .78em); letter-spacing: .22em; font-weight: 750; color: color-mix(in srgb, var(--sari) 55%, #5a4310); }
.sh-belge__ad { font: italic 600 2em/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; margin: .1em 0 .1em; }
.sh-belge__c > .sh-k:last-of-type { max-width: 22em; }
.sh-belge__alt { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-top: .6em; gap: 1em; }
.sh-belge__alt > div { display: flex; flex-direction: column; align-items: center; gap: .1em; padding-top: .2em; border-top: 1px solid var(--cizgi); min-width: 7em; }
.sh-belge__alt span { font-size: max(9px, .72em); color: var(--soluk); }
.sh-belge__alt b { font-size: max(9px, .85em); }
.sh-belge__imza { width: 6em; height: 1.6em; fill: none; stroke: #23304d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-muhur { position: absolute; z-index: 3; right: 4%; top: 8%; width: 4.4em; height: 4.4em; filter: drop-shadow(0 .2em .3em rgb(0 0 0 / .3)); rotate: -12deg; }
.sh-muhur svg { width: 100%; height: 100%; fill: var(--sari); stroke: color-mix(in srgb, var(--sari) 60%, #6a4e10); stroke-width: .6; }
.sh-muhur > span { position: absolute; inset: 22%; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .7); color: #fff; }
.sh-muhur .sh-ik { width: 60%; height: 60%; stroke-width: 3; }
.sh-belge-arka { z-index: 1; left: calc(50% - min(70cqw, 30em) / 2 + 3cqw); top: calc(var(--ust) + 8cqh); width: min(70cqw, 30em); height: 13em; transform: perspective(110em) rotateX(14deg) rotateZ(3deg); filter: brightness(.8); }
@container sahne (max-width: 360px) { .sh-belge { left: 4cqw; width: 92cqw; } .sh-belge__ad { font-size: 1.6em; } .sh-belge__c > .sh-k:last-of-type { display: none; } .sh-muhur { width: 3.4em; height: 3.4em; } }
@container sahne (max-aspect-ratio: 1/1) { .sh-belge { left: 5cqw; width: 90cqw; } .sh-belge-arka { left: 8cqw; width: 88cqw; } }

/* excel */
.sh-pen--xl { left: 6cqw; right: 14cqw; bottom: -10cqh; transform: perspective(160em) rotateY(6deg) rotateX(3deg); }
.sh-xl { font-size: max(9px, .9em); }
.sh-xl__ar { display: flex; align-items: center; gap: .6em; padding: .5em .8em; background: #1f6e43; color: #fff; }
.sh-xl__ar > span { display: flex; align-items: center; gap: .45em; margin-right: auto; white-space: nowrap; }
.sh-xl__ar > i { width: 3em; height: .5em; border-radius: 1em; background: rgb(255 255 255 / .3); }
.sh-xl__f { display: flex; align-items: center; gap: .6em; padding: .35em .8em; border-bottom: 1px solid var(--cizgi); font-family: ui-monospace, Consolas, monospace; font-size: max(9px, .9em); white-space: nowrap; }
.sh-xl__f > i { font-style: italic; color: var(--soluk); }
.sh-xl__t { display: flex; flex-direction: column; }
.sh-xl__r { display: grid; grid-template-columns: 2.2em 1.3fr 1fr .7fr .8fr; border-bottom: 1px solid var(--cizgi); }
.sh-xl__r > span { position: relative; padding: .3em .5em; border-right: 1px solid var(--cizgi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.9em; }
.sh-xl__r > span:first-child, .sh-xl__r--h > span { background: var(--ince2); color: var(--soluk); text-align: center; font-size: max(9px, .85em); }
.sh-xl__r--b > span:not(:first-child) { font-weight: 700; background: color-mix(in srgb, #1f6e43 8%, var(--yuzey)); }
.sh-xl__r > span:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.sh-xl__sec { box-shadow: inset 0 0 0 2px #1f8a52; background: color-mix(in srgb, #1f8a52 8%, var(--yuzey)); }
.sh-xl__sec::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: .45em; height: .45em; background: #1f8a52; border: 1px solid #fff; }
.sh-birak { width: min(46cqw, 17em); padding: .7em; display: flex; flex-direction: column; gap: .6em; right: 4cqw; left: auto; bottom: 8cqh; }
.sh-birak__a { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .8em .5em; border-radius: var(--r2); border: 1.5px dashed color-mix(in srgb, var(--vurgu) 50%, transparent); background: color-mix(in srgb, var(--vurgu) 6%, transparent); color: var(--vurgu); font-size: max(9px, .82em); font-weight: 600; text-align: center; }
.sh-birak__a .sh-ik { width: 1.6em; height: 1.6em; }
.sh-birak__d { display: flex; align-items: center; gap: .6em; }
.sh-birak__d > div { flex: 1; display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.sh-birak__d b { font-size: max(9px, .88em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-xl__ik { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: .4em; background: #1f6e43; color: #fff; }
@container sahne (min-aspect-ratio: 3/2) { .sh-birak { right: 6cqw; bottom: 10cqh; } }
@container sahne (max-height: 260px) { .sh-birak__a { display: none; } }
@container sahne (max-width: 360px) { .sh-xl__r { grid-template-columns: 1.8em 1.3fr 1fr .8fr; } .sh-xl__r > span:nth-child(5) { display: none; } }

/* teklif */
.sh-teklif { z-index: 3; left: calc(50% - min(58cqw, 24em) / 2 + 6cqw); top: calc(var(--ust) + 2cqh); width: min(58cqw, 24em); padding: 1.05em 1.15em 1em; display: flex; flex-direction: column; gap: .55em; transform: perspective(110em) rotateX(10deg) rotateY(-10deg) rotateZ(1.5deg); transform-origin: 50% 0; }
.sh-teklif__u { display: flex; justify-content: space-between; align-items: center; }
.sh-teklif__et { font-size: max(9px, .78em); letter-spacing: .2em; font-weight: 800; color: var(--vurgu); }
.sh-teklif__b { font-size: 1.35em; letter-spacing: -.02em; line-height: 1.15; }
.sh-teklif__k { display: flex; flex-direction: column; gap: .35em; padding: .2em 0 .5em; border-bottom: 1px solid var(--cizgi); }
.sh-teklif__k > div { display: flex; align-items: center; gap: .5em; font-size: max(9px, .9em); white-space: nowrap; }
.sh-teklif__k .sh-okr { width: 1.3em; height: 1.3em; }
.sh-teklif__s { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6em; }
.sh-teklif__s > div { display: flex; flex-direction: column; gap: .1em; padding: .5em .65em; border-radius: var(--r2); background: var(--ince); min-width: 0; }
.sh-teklif__s b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05em; }
.sh-teklif__o { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .2em; }
.sh-teklif__o > span { display: flex; align-items: center; gap: .4em; color: var(--soluk); font-size: max(9px, .85em); }
.sh-teklif__o .sh-ik { width: 2.2em; color: #23304d; }
.sh-teklif__o .sh-btn { padding: .5em 1.1em; }
.sh-teklif-arka { z-index: 1; left: 6cqw; top: calc(var(--ust) + 10cqh); width: min(36cqw, 15em); padding: .9em 1em; display: flex; flex-direction: column; gap: .45em; transform: perspective(110em) rotateX(10deg) rotateY(14deg) rotateZ(-6deg); filter: brightness(.88); }
.sh-teklif-arka .sh-k { letter-spacing: .1em; font-weight: 700; }
.sh-teklif-arka__imza { display: flex; gap: 1em; margin-top: .8em; }
.sh-teklif-arka__imza i { flex: 1; height: 1.6em; border-bottom: 1px solid var(--cizgi); }
.sh-tasl { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; margin-top: .2em; }
.sh-tasl i { display: block; border-radius: .3em; border: 1.5px solid color-mix(in srgb, var(--vurgu) 45%, transparent); background: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.sh-tasl__u { grid-column: span 2; height: 1.4em; }
.sh-tasl__k { height: 3.2em; }
.sh-tasl__s { grid-column: span 2; height: .9em; }
.sh-tasl__b { grid-column: 2; height: 1.4em; background: color-mix(in srgb, var(--vurgu) 35%, transparent) !important; }
.sh-teklif__cip { right: 5cqw; top: calc(var(--ust) + 2cqh + 15em); }
@container sahne (max-aspect-ratio: 13/10) { .sh-teklif-arka { display: none; } .sh-teklif { left: calc(50% - min(84cqw, 24em) / 2); width: min(84cqw, 24em); } }
@container sahne (max-height: 260px) { .sh-teklif__k > div:nth-child(n+3) { display: none; } .sh-teklif__cip { display: none; } }

/* önizleme */
.sh-pen--oz { left: 6cqw; right: 5cqw; border-radius: calc(var(--kose) * .75em) calc(var(--kose) * .75em) 0 0; }
.sh-oz { display: flex; flex-direction: column; height: 100%; font-size: max(9px, .92em); }
.sh-oz__band { display: flex; align-items: center; gap: .5em; padding: .4em .9em; background: #fde68a; color: #6b4a00; font-size: max(9px, .85em); white-space: nowrap; overflow: hidden; }
.sh-oz__band span { opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.sh-oz__ic { flex: 1; display: flex; min-height: 0; }
.sh-oz__yan { flex: none; display: flex; flex-direction: column; align-items: center; gap: .9em; width: 3.2em; padding: .8em 0; background: #16181d; color: rgb(255 255 255 / .45); }
.sh-oz__logo { width: 1.7em; height: 1.7em; border-radius: .45em; background: linear-gradient(135deg, var(--vurgu), #7a5cf0); }
.sh-oz__yan--a { color: #fff; }
.sh-oz__ana { flex: 1; display: flex; flex-direction: column; gap: .6em; padding: .8em 1em; min-width: 0; }
.sh-oz__b { font-size: 1.1em; }
.sh-oz__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.sh-oz__kpi > div { display: flex; flex-direction: column; padding: .5em .65em; border-radius: var(--r2); background: var(--ince); }
.sh-oz__kpi b { font-size: 1.35em; font-variant-numeric: tabular-nums; }
.sh-oz__t { display: flex; flex-direction: column; }
.sh-oz__r { display: grid; grid-template-columns: 6em 1fr auto; align-items: center; gap: .8em; padding: .5em .2em; border-bottom: 1px solid var(--cizgi); }
.sh-oz__r > span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-hafta { display: flex; flex-direction: column; gap: .4em; padding: .75em .9em; width: max-content; }
.sh-hafta__s { display: flex; align-items: center; gap: .55em; font-size: max(9px, .9em); font-weight: 600; white-space: nowrap; color: var(--soluk); }
.sh-hafta__s > i { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1.5px solid var(--cizgi); color: #fff; }
.sh-hafta__s > i .sh-ik { width: 70%; height: 70%; stroke-width: 3; }
.sh-hafta__s--b { color: var(--yazi); }
.sh-hafta__s--b > i { background: var(--yesil); border-color: var(--yesil); }
.sh-hafta__s--a { color: var(--vurgu); }
.sh-hafta__s--a > i { border-color: var(--vurgu); box-shadow: inset 0 0 0 .25em var(--yuzey); background: var(--vurgu); }
@container sahne (min-aspect-ratio: 3/2) { .sh-hafta { left: auto; right: 5cqw; bottom: 9cqh; } }
@container sahne (max-width: 420px) { .sh-oz__kpi > div:nth-child(3) { display: none; } .sh-oz__kpi { grid-template-columns: 1fr 1fr; } .sh-oz__r > .sh-cz { display: none; } .sh-oz__r { grid-template-columns: 1fr auto; } }
@container sahne (max-height: 260px) { .sh-hafta { display: none; } }

/* dosya */
.sh-kapak { position: absolute; z-index: 3; left: calc(50% - min(40cqw, 52cqh) / 2 + 8cqw); top: calc(var(--ust) + 1cqh); width: min(40cqw, 52cqh); aspect-ratio: 1 / 1.3; padding: 1.2em 1.1em; display: flex; flex-direction: column; gap: .5em; border-radius: calc(var(--kose) * .35em); background: linear-gradient(160deg, #1d2333, #0f131c 60%); color: #fff; box-shadow: var(--gol), inset 0 0 0 1px rgb(255 255 255 / .08); transform: perspective(100em) rotateY(-16deg) rotateX(6deg) rotateZ(2deg); overflow: hidden; }
.sh-kapak__m { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .5em; background: var(--vurgu); font-weight: 800; font-size: max(9px, .85em); letter-spacing: .02em; }
.sh-kapak > b { margin-top: auto; font-size: 1.45em; line-height: 1.1; letter-spacing: -.02em; }
.sh-kapak__a { font-size: max(9px, .75em); opacity: .6; line-height: 1.35; }
.sh-kapak__s { position: absolute; right: -2em; top: -2em; width: 8em; height: 8em; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--vurgu) 55%, transparent), transparent); }
.sh-sayfa { z-index: 2; width: min(34cqw, 46cqh); aspect-ratio: 1 / 1.3; padding: 1em; display: flex; flex-direction: column; gap: .4em; }
.sh-sayfa .sh-k { letter-spacing: .08em; font-weight: 700; margin-bottom: .3em; }
.sh-sayfa--1 { left: calc(50% - min(40cqw, 52cqh) / 2 - 18cqw); top: calc(var(--ust) + 8cqh); transform: perspective(100em) rotateY(14deg) rotateZ(-9deg); filter: brightness(.8); }
.sh-sayfa--2 { left: calc(50% - min(40cqw, 52cqh) / 2 - 6cqw); top: calc(var(--ust) + 4cqh); transform: perspective(100em) rotateY(6deg) rotateZ(-4deg); filter: brightness(.9); }
.sh-sayfa__g { display: flex; align-items: flex-end; gap: .4em; height: 4em; margin-top: auto; }
.sh-sayfa__g i { flex: 1; border-radius: .2em .2em 0 0; background: color-mix(in srgb, var(--vurgu) 60%, var(--yuzey)); }
.sh-sayfa__l { display: flex; flex-direction: column; gap: .4em; margin-top: auto; }
.sh-sayfa__l i { height: 1.5em; border-radius: .3em; background: var(--ince2); }
.sh-dosya__cip { right: 5cqw; bottom: 8cqh; }
@container sahne (max-aspect-ratio: 1/1) { .sh-kapak { width: 56cqw; left: 30cqw; } .sh-sayfa { width: 50cqw; } .sh-sayfa--1 { left: 4cqw; } .sh-sayfa--2 { left: 12cqw; } }

/* konum */
.sh-harita { position: absolute; z-index: 1; left: 5cqw; right: -6cqw; top: calc(var(--ust) + 2cqh); bottom: -10cqh; border-radius: calc(var(--kose) * 1em) 0 0 0; overflow: hidden; box-shadow: var(--gol); transform: perspective(140em) rotateX(22deg) rotateZ(-3deg); transform-origin: 50% 100%; }
.sh-harita svg { display: block; width: 100%; height: 100%; }
.sh-h__z { fill: #eceae4; }
.sh-h__su { fill: #b9d6ef; }
.sh-h__park { fill: #cfe5c3; }
.sh-h__yol { fill: none; stroke: #ffffff; stroke-width: 7; }
.sh-h__ana { fill: none; stroke: #f8d77b; stroke-width: 10; }
.sh-h__bina rect { fill: #e0ddd6; stroke: #d6d2ca; }
.sh-h__rota { fill: none; stroke: var(--vurgu); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sh-h__arac { position: absolute; left: 20%; top: 52%; display: grid; place-items: center; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; background: #fff; color: var(--vurgu); box-shadow: var(--gol2); }
.sh-h__pin { position: absolute; left: 65%; top: 38%; width: 3em; height: 3em; margin: -2.9em 0 0 -1.5em; color: var(--kirmizi); filter: drop-shadow(0 .3em .3em rgb(0 0 0 / .35)); }
.sh-h__pin .sh-ik { position: relative; width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.4; }
.sh-h__nabiz { position: absolute; left: 50%; bottom: -.4em; width: 2.4em; height: 2.4em; margin-left: -1.2em; border-radius: 50%; background: color-mix(in srgb, var(--kirmizi) 50%, transparent); opacity: 0; }
.sh-yer { width: min(46cqw, 17em); display: flex; flex-direction: column; gap: .6em; }
.sh-yer__u { display: flex; align-items: center; gap: .6em; }
.sh-yer__u > div { display: flex; flex-direction: column; min-width: 0; }
.sh-yer__u b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-yer__ik { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: color-mix(in srgb, var(--kirmizi) 13%, transparent); color: var(--kirmizi); }
.sh-yer__c { display: flex; gap: .35em; flex-wrap: wrap; }
@container sahne (max-height: 260px) { .sh-yer__c { display: none; } }

/* fatura */
.sh-fatura { z-index: 2; left: calc(50% - min(62cqw, 25em) / 2 - 2cqw); top: calc(var(--ust) + 2cqh); width: min(62cqw, 25em); padding: 1em 1.15em 1.1em; display: flex; flex-direction: column; gap: .7em; transform: perspective(110em) rotateX(14deg) rotateY(-6deg) rotateZ(-2deg); transform-origin: 50% 0; }
.sh-fatura::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5em; height: .55em; background: radial-gradient(circle at .35em 0, var(--kagit) .35em, transparent .36em) 0 0 / .7em .55em repeat-x; }
.sh-fatura__u { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.sh-fatura__u > div { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.sh-fatura__u .sh-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-fatura__et { font-size: 1.3em; font-weight: 750; letter-spacing: -.02em; }
.sh-fatura__u .sh-qr { width: 3.4em; flex: none; box-shadow: 0 0 0 1px var(--cizgi); }
.sh-fatura__t { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.sh-fatura__t > div { display: flex; flex-direction: column; gap: .35em; }
.sh-fatura__k { display: flex; flex-direction: column; font-size: max(9px, .88em); }
.sh-fatura__r { display: grid; grid-template-columns: 1fr 3.5em 7.5em; gap: .5em; padding: .4em 0; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.sh-fatura__r > *:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sh-fatura__r--b { color: var(--soluk); font-weight: 650; font-size: max(9px, .9em); border-bottom-width: 1.5px; }
.sh-fatura__r--a { color: var(--soluk); }
.sh-fatura__r--top { border-bottom: 0; padding-top: .55em; font-size: 1.12em; }
.sh-fatura__r--top > span:first-child { font-weight: 650; }
.sh-onay { position: absolute; z-index: 4; left: 1em; bottom: -1.1em; display: flex; align-items: center; gap: .45em; padding: .45em .8em; border: .16em solid var(--yesil); border-radius: .5em; color: var(--yesil); background: color-mix(in srgb, var(--kagit) 85%, transparent); font-weight: 800; font-size: 1.05em; letter-spacing: .02em; text-transform: none; rotate: -8deg; box-shadow: var(--gol2); white-space: nowrap; }
.sh-onay .sh-ik { stroke-width: 3; }
@container sahne (max-width: 360px) { .sh-fatura { left: 5cqw; width: 90cqw; } .sh-fatura__t { display: none; } .sh-fatura__r { grid-template-columns: 1fr 6.5em; } .sh-fatura__r > span:nth-child(2) { display: none; } }
@container sahne (max-aspect-ratio: 1/1) { .sh-fatura { left: 5cqw; width: 90cqw; } }

/* küçük (kart) sahnelerde ikincil parçaları sadeleştir */
.sahne--kucuk .sh-cip--koyu { display: none; }
@container sahne (max-width: 340px) {
  .sh-kurgu { display: none; }
  .sh-reel-kap { right: auto; left: calc(50% - var(--vw) / 2); }
  .sahne--kucuk .sh-karne-arka, .sahne--kucuk .sh-rapor-arka { display: none; }
  .sahne--kucuk .sh-karne, .sahne--kucuk .sh-rapor { left: 6cqw; right: auto; width: 88cqw; }
  .sahne--kucuk .sh-rapor-e { display: none; }
  .sh-ic { --vw: min(48cqw, 74cqh); }
  .sh-hft { grid-template-columns: repeat(5, 1fr); }
  .sh-hft > span:nth-child(n+6) { display: none; }
}
@container sahne (max-width: 300px) {
  .sahne--kucuk .sh-yan { display: none; }
  .sahne--kucuk .sh-tel { right: auto; left: calc(50% - var(--tw) / 2); }
}

/* geniş kutularda (bento karosu) parçalar biraz büyür */
@container sahne (min-width: 600px) {
  .sh-os { width: min(40cqw, 23em); }
  .sh-sec { flex-basis: 19em; padding: 1.2em 1.25em 1.4em; }
  .sh-sec b { font-size: 1.3em; }
  .sh-sohbet { width: min(50cqw, 26em); }
  .sh-sohbet__akis { padding: 1em; gap: .6em; }
  .sh-rapor { width: min(56cqw, 29em); right: 9cqw; }
  .sh-rapor svg { height: 8.5em; }
  .sh-rapor .sh-graf__nokta { top: calc(12 / 90 * 8.5em - .45em); }
  .sh-rapor-arka { left: 9cqw; top: calc(var(--ust) + 10cqh); }
  .sh-rapor-e { left: 14cqw; bottom: 16cqh; }
  .sh-sk-y { width: min(56cqw, 25em); margin-left: calc(min(56cqw, 25em) / -2); }
  .sh-odev { left: 9cqw; }
  .sh-gy { right: auto; left: calc(9cqw + 12em); top: calc(var(--ust) + 3cqh + 4.6em); width: min(46cqw, 24em); }
  .sh-geri { left: 13cqw; bottom: 9cqh; width: min(46cqw, 23em); }
  .sh-teklif { width: min(52cqw, 26em); }
  .sh-acil { width: min(64cqw, 30em); left: calc(50% - min(64cqw, 30em) / 2 - 4cqw); }
  .sh-karne { width: min(50cqw, 28em); left: calc(50% - min(50cqw, 28em) / 2 + 9cqw); }
  .sh-karne-arka { left: calc(50% - min(50cqw, 28em) / 2 + 9cqw - min(30cqw, 15em) + 2em); width: min(30cqw, 15em); }
}

/* Telefonda sahne hareketleri yarı sürede ve yarı gecikmeyle (hızlı kaydıran boş kutu görmesin). */
@media (max-width: 700px) {
  .sahne--canli [data-a] { animation-duration: .5s; animation-delay: calc(var(--d, 0s) * .5); }
}

/* ortak/logo-serit.css */
/* Akan logo şeridi. Sayfa renklerini değişkenlerle alır:
   --ls-yazi (başlık), --ls-soluk (sayı), --ls-plaka (plaka zemini), --ls-cizgi (plaka kenarı), --ls-yazi-tipi. */
.ls { padding: 28px 0 8px; overflow: hidden; }
.ls__b { display: flex; align-items: baseline; gap: 12px; margin: 0 56px 18px; font: italic 500 17px/1.2 var(--ls-yazi-tipi, inherit); color: var(--ls-yazi, currentColor); letter-spacing: .01em; }
.ls__b::after { content: ""; flex: 1; height: 1px; background: var(--ls-cizgi, rgba(255,255,255,.18)); align-self: center; }
.ls__sayi { order: 2; font: 400 12.5px/1 var(--ls-yazi-tipi, inherit); font-style: normal; color: var(--ls-soluk, currentColor); opacity: .8; }
.ls__b::after { order: 1; }
.ls__pencere { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* akış logo-serit.js'te (sürükleme ve savurma için); betik yoksa CSS akar */
.ls__akis { display: flex; width: max-content; animation: ls-ak 70s linear infinite; will-change: transform; }
.ls--js .ls__akis { animation: none; }
.ls__dizi { display: flex; gap: 16px; padding: 6px 8px 14px; margin: 0; list-style: none; }
.ls__plaka { flex: none; height: 84px; padding: 0 22px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--ls-plaka, #f4eddc); border: 1px solid var(--ls-cizgi, rgba(0,0,0,.08)); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 22px -14px rgba(0,0,0,.55); }
.ls__plaka img { height: 56px; width: auto; max-width: 190px; object-fit: contain; display: block; }
@keyframes ls-ak { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .ls__b { margin: 0 16px 14px; font-size: 16px; }
  .ls__plaka { height: 64px; padding: 0 16px; }
  .ls__plaka img { height: 42px; max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls__akis { animation: none; }
}

/* stil.css */
/* Taslak 36 · Mavi-turuncu (35-galeri'nin tek görünümlü hâli).
   Hakan'ın gönderdiği tamamlayıcı çift: doygun mavi #087FC1 duvar, turuncu #F18A27 vurgu.
   Duvar maviye boyalı; aşağı doğru ve kenarlarda hafifçe derinleşir (küçük yazı derin maviye düşer, AA geçer).
   Turuncu yalnızca dolgu ve şekil olarak kullanılır (çubuk, sayaç, rozet noktası, ok, düğme, odak halkası);
   turuncunun üstündeki yazı koyu lacivert. Yazı tipi Outfit (35'in B seçeneği). */

:root {
  --mavi: #087fc1;
  --turuncu: #f18a27;
  --turuncu-h: #f59a42;
  --turuncu-yazi: #0b2236;
  --lacivert: #062a45;

  /* duvar */
  --duvar: #087fc1;
  --duvar-isik: #148bcb;
  --duvar-ust: #066ea9;
  --duvar-alt: #066ca8;
  --doku: .035;
  --vinyet: .5;
  --vinyet-renk: 2 36 74;
  --yazi: #ffffff;
  --soluk: #eef6fc;
  --cizgi: rgb(255 255 255 / .2);
  --cizgi-g: rgb(255 255 255 / .46);
  --vurgu: var(--turuncu);
  --vurgu-yazi: #ffffff;
  --vurgu-ust: var(--turuncu-yazi);
  --golge: 2 30 62;
  --isik: 205 236 255;
  --isik-g: .78;
  --tel: rgb(255 255 255 / .5);
  --ray: rgb(255 255 255 / .34);
  --ray-alt: rgb(2 30 62 / .42);

  /* çerçeve ve paspartu */
  --cer1: #1f3a52; --cer2: #10243a; --cer3: #081626;
  --cer-kenar: rgb(255 255 255 / .16);
  --cer-p: 9px;
  --pas: #fbf9f5;
  --pas-p: 21px;
  --pas-golge: rgb(10 40 70 / .2);
  --fis-z: var(--turuncu); --fis-y: var(--turuncu-yazi);
  --ton-k: #041d33;
  --adim-yazi: #ffffff;
  --adim-soluk: rgb(255 255 255 / .94);
  --k-cer: linear-gradient(135deg, #c8650f, #f8a453 30%, #d97a20 52%, #f49b44 78%, #b75c10);
  --k-pas: #062a45;
  --dugme-z: rgb(255 255 255 / .06);
  --dugme-hz: rgb(255 255 255 / .14);

  /* salon: daha derin mavi oda, lacivert yüzeyler, turuncu vurgu */
  --s-duvar: #0868a5;
  --s-isik: #1580c0;
  --s-yazi: #ffffff;
  --s-soluk: #e6f1fa;
  --s-cizgi: rgb(255 255 255 / .2);
  --s-alan: rgb(255 255 255 / .6);
  --s-vurgu: var(--turuncu);
  --s-dugme-z: var(--turuncu); --s-dugme-y: var(--turuncu-yazi);
  --s-dugme-hz: var(--turuncu-h); --s-dugme-hy: var(--turuncu-yazi);
  --s-kart: #063a5e;
  --s-kart-kenar: rgb(241 138 39 / .38);

  /* sahneler */
  --sahne-yuzey: #ffffff;
  --sahne-yazi: #10202f;
  --sahne-soluk: #566271;
  --sahne-cizgi: rgb(16 32 47 / .12);
  --sahne-vurgu: #0a6fae;
  --sahne-yesil: #2f8458;
  --sahne-sari: #e39a2f;
  --sahne-kirmizi: #c9502f;

  /* yazı: Outfit */
  --serif: "Outfit", "Segoe UI", system-ui, sans-serif;
  --sans: "Outfit", "Segoe UI", system-ui, sans-serif;
  --sw: 500; --sit: normal; --em-w: 300; --sz: .97; --siz: -.012em; --siz-b: -.03em;
  --ince: 340; --govde: 400; --orta: 560; --iz-k: .06em;
  --sahne-yazi-tipi: "Outfit", "Segoe UI", sans-serif;
}

/* tuvaller: maviyle turuncu arasında, ikisine de yakışan sakin tonlar */
[data-id="saglik"] { --c: #c8702c; }
[data-id="iyilestirme"] { --c: #2e6f8c; }
[data-id="efatura"] { --c: #8a6a55; }
[data-id="vitrin"] { --c: #b05a34; }
[data-id="siparis"] { --c: #24598a; }
[data-id="randevu"] { --c: #9d7c4b; }
[data-id="asistan"] { --c: #2d7480; }
[data-id="video"] { --c: #66798a; }
[data-id="sadakat"] { --c: #c98648; }
[data-id="guvenlik"] { --c: #345a72; }
[data-id="egitim"] { --c: #4c6c9e; }
[data-id="ozel"] { --c: #965840; }
[data-id="kurumsal"] { --c: #062a45; }

/* ---------- ortak ---------- */
:root {
  --yavas: cubic-bezier(.2, .7, .1, 1);
  --yumusak: cubic-bezier(.65, 0, .25, 1);
  --doku-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
  --sahne-kose: .7;
  --sahne-golge: .5;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; background: var(--duvar); }
html.salon-acik { overflow: hidden; }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(62% 30% at 50% 44%, var(--duvar-isik), transparent 74%) 0 0 / 100% 900px no-repeat,
    linear-gradient(to bottom, var(--duvar-ust) 0, var(--duvar-ust) 150px, var(--duvar) 250px, var(--duvar) 500px, var(--duvar-alt) 640px) 0 0 / 100% 640px no-repeat,
    var(--duvar-alt);
  color: var(--yazi);
  font: var(--govde) 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .7s ease, color .7s ease;
}
/* duvarın sıva dokusu */
body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--doku-svg); opacity: var(--doku);
}
/* yumuşak kenar kararması: karanlık değil, yalnızca kenarlar */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 38%, transparent 52%, rgb(var(--vinyet-renk) / var(--vinyet)) 100%);
}
.sayfa { position: relative; z-index: 1; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--turuncu); outline-offset: 3px; box-shadow: 0 0 0 3px var(--lacivert); }
h2, h3, p, ul, ol, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

/* ---------- üst çubuk ---------- */
.ust { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 56px 6px; }
.marka { display: flex; gap: 14px; min-height: 44px; align-items: center; text-decoration: none; }
.marka__isaret { width: 38px; height: 38px; flex: none; }
.marka__yazi { display: flex; gap: 16px; align-items: center; }
.marka__ad { font: var(--sw) calc(23px * var(--sz))/1 var(--serif); letter-spacing: var(--siz); }
.marka__unvan { font: var(--govde) 13.5px/1 var(--sans); letter-spacing: .03em; color: var(--soluk); padding-left: 16px; border-left: 1px solid var(--cizgi-g); }
.ust__nav { display: flex; align-items: center; gap: 10px; }
.tumu, .iletisim {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--cizgi-g); background: var(--dugme-z); cursor: pointer; text-decoration: none;
  font: var(--govde) 14px/1 var(--sans); letter-spacing: .04em; transition: border-color .5s, background-color .5s, color .5s;
}
.tumu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.tumu:hover, .iletisim:hover { border-color: var(--yazi); background: var(--dugme-hz); }
.tumu[aria-pressed="true"] { border-color: var(--turuncu); background: var(--lacivert); color: var(--yazi); }
.iletisim { border-color: var(--turuncu); background: var(--turuncu); color: var(--turuncu-yazi); font-weight: var(--orta); }
.iletisim:hover { border-color: var(--turuncu-h); background: var(--turuncu-h); }
.iletisim__kisa { display: none; }
.slogan { padding: 6px 56px 0; font: var(--sw) calc(clamp(24px, 2.35vw, 34px) * var(--sz))/1.15 var(--serif); letter-spacing: var(--siz-b); }
.slogan em { color: rgb(255 255 255 / .86); font-style: var(--sit); font-weight: var(--em-w); }

/* ---------- salon başlığı: Hizmetlerimiz ---------- */
.sergi__bas { display: flex; align-items: center; gap: 18px; padding: 26px 56px 0; }
.sergi__bas h2 { font: var(--sit) var(--sw) calc(21px * var(--sz))/1 var(--serif); letter-spacing: .005em; white-space: nowrap; }
.sergi__bas i { flex: 0 1 64px; height: 3px; background: var(--turuncu); }
.sergi__bas p { font: var(--govde) 13px/1 var(--sans); letter-spacing: .08em; color: var(--soluk); white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ---------- sergi ---------- */
.sergi { position: relative; }
.duvar { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; outline: none; overscroll-behavior-x: contain; }
.duvar::-webkit-scrollbar { display: none; }
.duvar--suruk { cursor: grabbing; }
.duvar--kayiyor, .duvar--suruk { scroll-snap-type: none !important; }
.duvar--suruk .eser { pointer-events: none; }
.serit {
  position: relative; display: flex; align-items: flex-start; width: max-content; gap: 84px;
  padding: 60px 130px 18px 56px; --hmax: 360px; --ray-y: 14px; user-select: none; -webkit-user-select: none;
}
/* asma rayı: duvarın üstünde ince bir çıta */
.serit::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--ray-y); height: 3px;
  background: linear-gradient(to bottom, var(--ray), var(--ray-alt));
}
.eser--genis { --w: 480px; --h: 332px; }
.eser--yatay { --w: 400px; --h: 282px; }
.eser--dikey { --w: 268px; --h: 360px; }
.eser--kare { --w: 312px; --h: 312px; }
.eser {
  --pt: calc((var(--hmax) - var(--h)) / 2);
  --kay: 0;
  position: relative; display: block; flex: none; width: var(--w); padding-top: var(--pt);
  text-decoration: none; -webkit-tap-highlight-color: transparent; outline: none;
}
/* asma telleri: raydan çerçevenin iki üst köşesine */
.tel { position: absolute; left: 0; width: var(--w); top: calc(var(--ray-y) + 3px - 60px); height: calc(var(--pt) + 60px - var(--ray-y) - 3px); overflow: visible; pointer-events: none; transition: translate 1s var(--yavas); }
.tel line { stroke: var(--tel); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* spot ışığı: yukarıdan düşen sıcak ışık konisi + duvarda yumuşak sönen hale */
.isik {
  position: absolute; z-index: -1; left: 50%; top: -46px;
  width: calc(var(--w) * 1.9); height: calc(var(--pt) + var(--h) + 250px); translate: -50% 0;
  background: radial-gradient(ellipse 50% 50% at 50% 42%,
    rgb(var(--isik) / calc(var(--isik-g) * .36)) 0%,
    rgb(var(--isik) / calc(var(--isik-g) * .24)) 38%,
    rgb(var(--isik) / calc(var(--isik-g) * .1)) 60%,
    transparent 78%);
  opacity: .22; transition: opacity 1.2s var(--yavas), scale 1.2s var(--yavas);
  pointer-events: none;
}
.isik::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: calc(var(--pt) + var(--h) * .8 + 46px);
  background: radial-gradient(50% 100% at 50% 0%, rgb(var(--isik) / calc(var(--isik-g) * .16)), rgb(var(--isik) / calc(var(--isik-g) * .06)) 45%, transparent 78%);
}
.eser--orta .isik { opacity: 1; }
.cerceve {
  position: relative; display: block; width: var(--w); height: var(--h); padding: var(--cer-p);
  background: linear-gradient(145deg, var(--cer1), var(--cer2) 42%, var(--cer3));
  box-shadow:
    0 34px 50px -26px rgb(var(--golge) / .72),
    0 10px 18px -10px rgb(var(--golge) / .5),
    inset 0 1px 0 var(--cer-kenar), inset 0 0 0 1px rgb(0 0 0 / .1);
  transition: transform 1.1s var(--yavas), box-shadow 1.1s var(--yavas);
}
/* ışık çerçevenin üstüne düşer */
.cerceve::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(90% 70% at 50% -10%, rgb(var(--isik) / .2), transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s var(--yavas);
  background: radial-gradient(90% 70% at 50% -10%, rgb(255 255 255 / .16), transparent 70%);
}
.eser--orta .cerceve::after { opacity: .7; }
.paspartu { display: block; height: 100%; padding: var(--pas-p); background: var(--pas); box-shadow: inset 0 1px 6px var(--pas-golge); }
.tuval { position: relative; display: block; height: 100%; overflow: hidden; outline: 1px solid rgb(255 255 255 / .9); outline-offset: 1px; box-shadow: 0 0 0 2px rgb(0 0 0 / .08); }
.tuval .sahne {
  position: absolute; inset: 0; --sahne-zemin: var(--c);
  transform: translateX(calc(var(--kay) * -10px)) scale(1.05);
  transition: background-color .7s ease;
}
.fis { position: absolute; right: calc(var(--cer-p) + var(--pas-p) + 8px); bottom: calc(var(--cer-p) + var(--pas-p) + 8px); z-index: 4; padding: 7px 12px 6px; background: var(--fis-z); color: var(--fis-y); font: var(--orta) 12.5px/1 var(--sans); letter-spacing: .08em; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .5); rotate: -2deg; }
.eser--yakinda .tuval .sahne { filter: saturate(.4) brightness(.94); opacity: .8; }
.eser--kurumsal .cerceve { padding: 10px; background: var(--k-cer); }
.eser--kurumsal .paspartu { background: var(--k-pas); box-shadow: inset 0 1px 8px rgb(0 0 0 / .5); }
.eser--kurumsal .tuval { outline-color: rgb(255 255 255 / .22); }

.etiket { display: block; width: min(var(--w), 340px); margin-top: 30px; }
.etiket__no { display: flex; align-items: center; gap: 12px; font: var(--govde) 12.5px/1 var(--sans); letter-spacing: .1em; color: var(--soluk); font-variant-numeric: tabular-nums; }
.etiket__incele { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; background: var(--turuncu); color: var(--turuncu-yazi); font-weight: var(--orta); letter-spacing: .06em; opacity: 0; translate: -6px 0; transition: opacity .6s var(--yavas), translate .7s var(--yavas); }
.etiket__incele::after { content: "→"; letter-spacing: 0; }
.etiket__ad { display: block; margin-top: 9px; font: var(--sw) calc(23px * var(--sz))/1.16 var(--serif); letter-spacing: var(--siz); }
.etiket__cumle { display: block; margin-top: 8px; font: var(--govde) 15px/1.4 var(--sans); color: var(--yazi); }
.etiket__kim { display: block; margin-top: 6px; font: var(--ince) 14px/1.4 var(--sans); color: var(--soluk); }
.etiket__kim span { font-style: var(--sit); }
.etiket__kim span, .kat__kim span { font-weight: 500; }
.etiket__fiyat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); font: var(--govde) 15px/1.2 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: border-color .8s; }
.rozet { display: inline-flex; align-items: center; gap: 8px; font: var(--orta) 12.5px/1 var(--sans); letter-spacing: .08em; color: var(--yazi); }
.rozet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--turuncu); }
.rozet--yakinda::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ucretsiz { display: inline-block; padding: 6px 11px 5px; background: var(--turuncu); color: var(--turuncu-yazi); font-weight: var(--orta); letter-spacing: .04em; }

/* üzerine gelince: yapıt duvardan ayrılır, spot ışığı açılır, etikette "Salonu aç" belirir */
@media (hover: hover) {
  .eser:hover .cerceve { transform: translateY(-12px); box-shadow: 0 70px 76px -36px rgb(var(--golge) / .8), 0 22px 30px -18px rgb(var(--golge) / .5), inset 0 1px 0 var(--cer-kenar), inset 0 0 0 1px rgb(0 0 0 / .1); }
  .eser:hover .cerceve::after { opacity: 1; }
  .eser:hover .tel { translate: 0 -12px; }
  .eser:hover .isik { opacity: 1; scale: 1.06; }
  .eser:hover .etiket__incele { opacity: 1; translate: none; }
  .eser:hover .etiket__fiyat { border-color: var(--cizgi-g); }
}
.eser:focus-visible { box-shadow: none; }
.eser:focus-visible .cerceve { transform: translateY(-12px); outline: 3px solid var(--turuncu); outline-offset: 8px; }
.eser:focus-visible .isik { opacity: 1; }
.eser:focus-visible .etiket__incele { opacity: 1; translate: none; }
.eser--kaynak .cerceve, .eser--kaynak .tel { visibility: hidden; }

/* kumanda: oklar, ilerleme çubuğu, sayaç, kaydırma ipucu */
.kumanda { display: flex; align-items: center; gap: 22px; padding: 16px 56px 22px; }
.ok { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--cizgi-g); border-radius: 50%; background: var(--dugme-z); cursor: pointer; transition: border-color .5s, background-color .5s, opacity .5s, color .5s; }
.ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.ok:hover:not(:disabled) { border-color: var(--turuncu); background: var(--turuncu); color: var(--turuncu-yazi); }
.ok:disabled { opacity: .32; cursor: default; }
/* çubuk tutulup sürüklenir (Hakan, 05.11.2026): tutma alanı 28 px, çizgi 1 px */
.ilerleme { position: relative; flex: 1; height: 28px; background: linear-gradient(var(--cizgi-g), var(--cizgi-g)) center / 100% 1px no-repeat; cursor: pointer; touch-action: none; }
.ilerleme--tut { cursor: grabbing; }
.ilerleme:hover i, .ilerleme--tut i { height: 7px; top: 10.5px; }
.ilerleme i { position: absolute; top: 11.5px; height: 5px; transition: height .2s, top .2s, background-color .7s; left: 0; width: 20%; background: var(--vurgu); transition: background-color .7s; }
.sayac { order: -1; min-width: 168px; font: var(--govde) 14px/1 var(--sans); letter-spacing: .06em; color: var(--soluk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sayac b { display: inline-block; padding: 5px 7px 4px; margin-right: 3px; background: var(--turuncu); color: var(--turuncu-yazi); font-weight: var(--orta); }
.sayac span { margin-left: 12px; color: var(--yazi); letter-spacing: .02em; }
.ok--geri { order: -2; }
.ipucu { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-right: -8px; font: var(--orta) 13.5px/1 var(--sans); letter-spacing: .05em; color: var(--vurgu-yazi); white-space: nowrap; transition: opacity .7s ease, translate .7s var(--yavas); }
.ipucu[hidden] { display: none; }
.ipucu span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--turuncu); color: var(--turuncu-yazi); font-weight: 600; animation: ipucu-ok 1.6s var(--yumusak) infinite; }
@keyframes ipucu-ok { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
.ipucu--gizle { opacity: 0; translate: 6px 0; }

/* ---------- Tümü (katalog) ---------- */
/* liste görünümünde yazı çok: duvar baştan sona bir ton derin mavi (küçük yazı AA geçsin) */
body.liste, html body.liste { background: var(--duvar-ust); }
.katalog { padding: 30px 56px 20px; }
.katalog__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 44px 34px; }
.kat { display: grid; grid-template-columns: 1fr; gap: 6px; text-decoration: none; }
.kat__kucuk { display: block; aspect-ratio: 4 / 3; padding: max(5px, calc(var(--cer-p) * .6)); background: linear-gradient(145deg, var(--cer1), var(--cer2) 42%, var(--cer3)); box-shadow: 0 24px 32px -20px rgb(var(--golge) / .8), inset 0 1px 0 var(--cer-kenar); margin-bottom: 12px; transition: transform .9s var(--yavas), box-shadow .9s var(--yavas); }
.kat__kucuk--kurumsal { background: var(--k-cer); }
.kat__tuval { position: relative; display: block; height: 100%; overflow: hidden; border: max(9px, calc(var(--pas-p) * .45)) solid var(--pas); }
.kat__kucuk--kurumsal .kat__tuval { border-color: var(--k-pas); }
.kat__tuval .sahne { position: absolute; inset: 0; --sahne-zemin: var(--c); }
.kat__no { font: var(--govde) 12px/1 var(--sans); letter-spacing: .1em; color: var(--soluk); font-variant-numeric: tabular-nums; }
.kat__ad { font: var(--sw) calc(21px * var(--sz))/1.15 var(--serif); letter-spacing: var(--siz); }
.kat__kim { font: var(--ince) 13.5px/1.4 var(--sans); color: var(--soluk); }
.kat__kim span { font-style: var(--sit); }
.kat__fiyat { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font: var(--govde) 14.5px/1.3 var(--sans); }
@media (hover: hover) { .kat:hover .kat__kucuk { transform: translateY(-6px); box-shadow: 0 38px 44px -24px rgb(var(--golge) / .85), inset 0 1px 0 var(--cer-kenar); } }

/* ---------- sözümüz ve künye ---------- */
.soz { padding: 96px 56px 40px; }
.soz__b { font: var(--sit) var(--sw) calc(21px * var(--sz))/1 var(--serif); color: var(--yazi); margin-bottom: 24px; }
.soz__liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--cizgi-g); }
.soz__liste li { padding: 22px 24px 8px 0; font: var(--sw) calc(clamp(20px, 1.8vw, 26px) * var(--sz))/1.22 var(--serif); letter-spacing: var(--siz); }
.soz__liste li + li { padding-left: 24px; border-left: 1px solid var(--cizgi); }
.kunye { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 30px; margin: 0 56px; padding: 22px 0 76px; border-top: 1px solid var(--cizgi); font: var(--ince) 13.5px/1.5 var(--sans); color: var(--soluk); }
.kunye a { text-decoration-color: var(--turuncu); display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--yazi); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- sergi salonu ---------- */
.salon { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; color: var(--s-yazi); color-scheme: dark; }
.salon[hidden] { display: none; }
.salon__zemin {
  /* pointer-events: none (Hakan, 05.11: salonda sağ ve sol boşlukta tekerlek kaydırmıyordu): sabit konumlu zemin
     tekerleği salona değil sayfaya yolluyordu, sayfa da salon açıkken kilitli. Artık tekerlek salonun kendisine gider. */
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 40%, transparent 55%, rgb(var(--vinyet-renk) / var(--vinyet)) 100%),
    radial-gradient(44% 50% at 75% 28%, rgb(var(--isik) / .12), transparent 72%),
    radial-gradient(90% 60% at 40% -8%, color-mix(in srgb, var(--s-isik) 38%, transparent), transparent 68%),
    var(--s-duvar);
  opacity: 0; transition: opacity .8s ease;
}
.salon__zemin::after { content: ""; position: absolute; inset: 0; background-image: var(--doku-svg); opacity: var(--doku); }
.salon--acik .salon__zemin { opacity: 1; }
.salon--kapaniyor .salon__zemin { opacity: 0; transition-duration: .7s; transition-delay: .1s; }
.salon--kapaniyor .s-salon, .salon--kapaniyor .s-etiket, .salon--kapaniyor .s-bento, .salon--kapaniyor .s-alt, .salon--kapaniyor .s-form, .salon--kapaniyor .s-eser .isik { opacity: 0 !important; transition: opacity .35s ease !important; }
.salon--kapaniyor .s-kapat { opacity: 0; transition: opacity .3s; }
.salon--sonuk .s-eser { opacity: 0; transition: opacity .4s ease; }
.s-kapat {
  position: fixed; z-index: 5; top: 20px; right: 28px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px;
  border: 1px solid var(--s-cizgi); background: color-mix(in srgb, var(--s-duvar) 94%, transparent); cursor: pointer;
  color: var(--s-yazi); font: var(--govde) 14px/1 var(--sans); letter-spacing: .04em;
  opacity: 0; transition: opacity .6s ease .3s, border-color .5s, background-color .5s;
}
.salon--acik .s-kapat { opacity: 1; }
.s-kapat span { font: 300 24px/1 var(--sans); margin-top: -2px; }
.s-kapat em { font-style: normal; }
.s-kapat:hover { border-color: var(--s-yazi); }
.salon__ic { max-width: 1400px; margin: 0 auto; padding: 34px 72px 120px; }
.s-salon { display: flex; align-items: center; gap: 16px; font: var(--govde) 13.5px/1 var(--sans); letter-spacing: .12em; color: var(--s-yazi); font-variant-numeric: tabular-nums; }
.s-salon span { color: var(--s-soluk); }
.s-salon b { font-weight: var(--govde); }
.s-salon b span { margin-left: .35em; }
.s-salon i { flex: 0 1 80px; height: 3px; background: var(--turuncu); }
.s-giris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; padding: 56px 0 10px; }
.s-eser { position: relative; }
.s-eser .cerceve { width: calc(var(--w) * 1.36); height: calc(var(--h) * 1.36); padding: calc(var(--cer-p) + 3px); will-change: transform; transition: transform 1s var(--yavas); }
.s-eser .cerceve::after { opacity: 1; }
.s-eser.eser--kurumsal .cerceve { padding: 13px; }
.s-eser .paspartu { padding: calc(var(--pas-p) * 1.3); }
.s-eser .fis { right: calc(var(--cer-p) + var(--pas-p) * 1.3 + 12px); bottom: calc(var(--cer-p) + var(--pas-p) * 1.3 + 12px); }
.s-eser .isik::before { top: 0; height: 52%; }
.s-eser .isik { top: -170px; width: calc(var(--w) * 2.4); height: calc(var(--h) * 1.36 + 340px); opacity: 0; transition: opacity 1.4s ease .3s; }
.salon--acik .s-eser .isik { opacity: 1; }
.s-eser .tuval .sahne { transform: none; }
.s-no { display: flex; align-items: center; gap: 16px; font: var(--govde) 13px/1 var(--sans); letter-spacing: .1em; color: var(--s-soluk); }
.salon .rozet--yakinda { color: var(--s-soluk); }
.s-etiket h1 { margin: 16px 0 0; }
.s-etiket h1, .s-etiket h2 { margin-top: 16px; font: var(--sw) calc(clamp(40px, 5vw, 74px) * var(--sz))/1.04 var(--serif); letter-spacing: var(--siz-b); }
.s-cumle { margin-top: 22px; max-width: 30em; font: var(--ince) clamp(18px, 1.5vw, 21px)/1.45 var(--sans); }
.s-kunye { margin-top: 34px; display: grid; gap: 0; max-width: 34em; border-top: 1px solid var(--s-cizgi); }
.s-kunye > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--s-cizgi); }
.s-kunye dt { font: var(--govde) 13px/1.5 var(--sans); letter-spacing: .06em; color: var(--s-soluk); }
.s-kunye dd { font: var(--govde) 16px/1.45 var(--sans); }

/* adımlar: duvara asılı bento */
.s-bas { display: flex; align-items: baseline; gap: 18px; margin-top: 84px; }
.s-bas h3, .s-alt h3 { font: var(--sw) calc(30px * var(--sz))/1.1 var(--serif); letter-spacing: var(--siz); }
.s-bas p { font: var(--ince) 14.5px/1.3 var(--sans); color: var(--s-soluk); }
.s-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 290px; gap: 40px; margin-top: 28px; }
.s-bento--4 .adim:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.s-bento--4 .adim:nth-child(2) { grid-column: span 8; }
.s-bento--4 .adim:nth-child(3), .s-bento--4 .adim:nth-child(4) { grid-column: span 4; }
.s-bento--5 .adim:nth-child(1) { grid-column: span 8; }
.s-bento--5 .adim:nth-child(2) { grid-column: span 4; }
.s-bento--5 .adim:nth-child(n+3) { grid-column: span 4; }
.adim {
  --ton: 70%; --ap: max(7px, calc(var(--cer-p) * .8));
  position: relative; margin: 0; min-width: 0; padding: var(--ap);
  background: linear-gradient(145deg, var(--cer1), var(--cer2) 42%, var(--cer3));
  box-shadow: 0 40px 56px -32px rgb(var(--golge) / .75), 0 12px 20px -12px rgb(var(--golge) / .5), inset 0 1px 0 var(--cer-kenar);
  transition: transform 1s var(--yavas), box-shadow 1s var(--yavas);
}
.adim:nth-child(2) { --ton: 58%; } .adim:nth-child(3) { --ton: 64%; } .adim:nth-child(4) { --ton: 54%; } .adim:nth-child(5) { --ton: 62%; }
.adim__sahne { position: absolute; inset: var(--ap); overflow: hidden; --sahne-zemin: color-mix(in srgb, var(--c) var(--ton), var(--ton-k)); --sahne-ust: 84px; }
.adim__sahne::after { content: ""; position: absolute; inset: 0 0 auto; height: 96px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--c) var(--ton), var(--ton-k)) 30%, transparent); }
.s-bento--kurumsal .adim { background: var(--k-cer); }
.s-bento--kurumsal .adim__sahne { --sahne-zemin: var(--k-pas); }
.s-bento--kurumsal .adim__sahne::after { background: linear-gradient(to bottom, var(--k-pas) 30%, transparent); }
.adim__b { position: absolute; z-index: 2; left: var(--ap); top: var(--ap); right: var(--ap); padding: 18px 22px; display: grid; gap: 5px; pointer-events: none; color: var(--adim-yazi); }
.adim__b b { font: var(--sw) calc(22px * var(--sz))/1.15 var(--serif); letter-spacing: var(--siz); }
.adim__b b em { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; margin-right: .45em; padding: 0 .2em; background: var(--turuncu); color: var(--turuncu-yazi); font-style: normal; font-weight: 600; font-size: .82em; vertical-align: .08em; }
.adim__b span { font: var(--govde) 14.5px/1.35 var(--sans); color: var(--adim-soluk); }
.s-bento--kurumsal .adim__b { color: #f4f1e8; }
.s-bento--kurumsal .adim__b span { color: rgb(244 241 232 / .8); }

@media (hover: hover) { .salon--acik .adim:hover { transform: translateY(-6px); box-shadow: 0 56px 64px -34px rgb(var(--golge) / .8), 0 16px 24px -14px rgb(var(--golge) / .5), inset 0 1px 0 var(--cer-kenar); } }

/* paket, fiyat, düğme: duvardaki basılı fiyat listesi gibi */
.s-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; margin-top: 100px; align-items: start; }
.s-alt h3 { margin-bottom: 20px; }
.s-icerik ul { list-style: none; padding: 0; border-top: 1px solid var(--s-cizgi); counter-reset: m; }
.s-icerik li { display: grid; grid-template-columns: 40px 1fr; padding: 13px 0; border-bottom: 1px solid var(--s-cizgi); font: var(--ince) 16.5px/1.4 var(--sans); counter-increment: m; }
.s-icerik li::before { content: counter(m, decimal-leading-zero); font: var(--govde) 13px/1.9 var(--sans); letter-spacing: .08em; color: var(--s-soluk); font-variant-numeric: tabular-nums; }
.s-fiyat { position: relative; padding: 34px 36px 36px; background: var(--s-kart); box-shadow: inset 0 0 0 1px var(--s-kart-kenar), 0 30px 50px -40px rgb(var(--golge) / .8); }
.s-fiyat::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--s-kart-kenar); pointer-events: none; }
.s-fiyat ul { list-style: none; padding: 0; border-top: 1px solid var(--s-cizgi); }
.s-fiyat li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--s-cizgi); font: var(--ince) 16px/1.35 var(--sans); }
.s-fiyat li i { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--s-alan); opacity: .7; translate: 0 -4px; }
.s-fiyat li b { color: var(--turuncu); font: var(--sw) calc(18px * var(--sz))/1.2 var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-kdv { margin: 12px 0 26px; font: var(--ince) 13.5px/1.4 var(--sans); color: var(--s-soluk); }
.s-dugme {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 30px 0 34px;
  border: 1px solid var(--s-dugme-z); background: var(--s-dugme-z); color: var(--s-dugme-y); cursor: pointer; text-decoration: none;
  font: var(--orta) 15px/1 var(--sans); letter-spacing: .06em; transition: background-color .5s, border-color .5s, color .5s;
}
.s-dugme::after { content: "→"; font-weight: 400; transition: translate .6s var(--yavas); }
.s-dugme:hover { background: var(--s-dugme-hz); border-color: var(--s-dugme-hz); color: var(--s-dugme-hy); }
.s-dugme:hover::after { translate: 5px 0; }
.s-dugme--sakin { background: transparent; color: var(--s-yazi); border-color: var(--s-alan); }
.s-dugme--sakin:hover { background: rgb(255 255 255 / .1); border-color: var(--s-yazi); color: var(--s-yazi); }
.s-dugme[aria-expanded="true"]::after { content: "↓"; }

.s-form { margin-top: 70px; padding: 40px 44px; background: var(--s-kart); box-shadow: inset 0 0 0 1px var(--s-kart-kenar); scroll-margin-top: 80px; }
.s-form[hidden] { display: none; }
.s-form__b { font: var(--sw) calc(30px * var(--sz))/1.1 var(--serif); letter-spacing: var(--siz); }
.s-form__a { margin-top: 8px; color: var(--s-soluk); font-weight: var(--ince); }
.s-form__alanlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 30px; margin-top: 28px; }
.alan { display: grid; gap: 6px; font: var(--govde) 14px/1.35 var(--sans); color: var(--s-soluk); }
.alan i { color: var(--s-vurgu); font-style: normal; }
.alan--genis { grid-column: span 2; }
.alan input, .alan textarea, .alan select {
  width: 100%; min-height: 46px; padding: 10px 0 8px; border: 0; border-bottom: 1px solid var(--s-alan); border-radius: 0;
  background: transparent; color: var(--s-yazi); font: var(--govde) 17px/1.3 var(--sans); resize: vertical; caret-color: var(--s-vurgu);
}
.alan input:focus, .alan textarea:focus, .alan select:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--s-vurgu); }
.onay { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; font: var(--ince) 15px/1.45 var(--sans); }
.onay input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--s-vurgu); }
.onay a { text-underline-offset: 3px; }
.s-form__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.s-form__durum { color: var(--s-soluk); font-weight: var(--ince); }

/* salonun içeriği yavaşça belirir */
.salon .s-salon, .salon .s-etiket, .salon .s-bas, .salon .adim, .salon .s-alt { opacity: 0; translate: 0 18px; transition: opacity 1s ease, translate 1.2s var(--yavas), transform 1s var(--yavas), box-shadow 1s var(--yavas); }
.salon--acik .s-salon, .salon--acik .s-etiket, .salon--acik .s-bas, .salon--acik .adim, .salon--acik .s-alt { opacity: 1; translate: none; }
.salon--acik .s-salon { transition-delay: .35s; }
.salon--acik .s-etiket { transition-delay: .5s; }
.salon--acik .s-bas { transition-delay: .7s; }
.salon--acik .adim { transition-delay: calc(.8s + var(--k) * .12s), calc(.8s + var(--k) * .12s), 0s, 0s; }
.salon--acik .s-alt { transition-delay: 1.05s; }


/* dokunmatik: tarayıcının kendi kaydırması, yapıta oturur */
@media (pointer: coarse) {
  .duvar { scroll-snap-type: x mandatory; cursor: auto; }
  .eser { scroll-snap-align: center; scroll-snap-stop: always; }
}

/* ---------- ara boylar ---------- */
@media (max-width: 1100px) {
  .s-giris { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .s-eser { order: -1; justify-self: start; }
  .s-eser .cerceve { width: min(calc(var(--w) * 1.36), 100%); height: auto; aspect-ratio: var(--w-sayi, 1) / 1; }
  .s-bento--4 .adim:nth-child(n), .s-bento--5 .adim:nth-child(n) { grid-column: span 6; grid-row: auto; }
  .s-bento--5 .adim:nth-child(1) { grid-column: span 12; }
  .s-alt { gap: 50px; }
  .soz__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soz__liste li:nth-child(4) { border-left: 0; padding-left: 0; }
}
.eser--genis, .s-eser.eser--genis { --w-sayi: 1.446; }
.eser--yatay, .s-eser.eser--yatay { --w-sayi: 1.418; }
.eser--dikey, .s-eser.eser--dikey { --w-sayi: .744; }
.eser--kare, .s-eser.eser--kare { --w-sayi: 1; }

/* ---------- telefon ---------- */
@media (max-width: 760px) {
  /* telefonda yapıtlar daha yukarıda: duvarın aydınlık bandı onlarla birlikte kısalır, etiketler derin maviye düşer */
  body {
    background:
      radial-gradient(80% 22% at 50% 34%, var(--duvar-isik), transparent 74%) 0 0 / 100% 800px no-repeat,
      linear-gradient(to bottom, var(--duvar-ust) 0, var(--duvar-ust) 150px, var(--duvar) 205px, var(--duvar) 330px, var(--duvar-alt) 445px) 0 0 / 100% 445px no-repeat,
      var(--duvar-alt);
  }
  .ust { padding: 12px 16px 2px; gap: 10px; }
  .marka { gap: 11px; }
  .marka__isaret { width: 34px; height: 34px; }
  .marka__yazi { flex-direction: column; align-items: flex-start; gap: 5px; justify-content: center; }
  .marka__ad { font-size: calc(20px * var(--sz)); }
  .marka__unvan { padding-left: 0; border-left: 0; font-size: 12.5px; }
  .ust__nav { gap: 8px; }
  .tumu, .iletisim { padding: 0 13px; }
  .iletisim__uzun { display: none; }
  .iletisim__kisa { display: inline; }
  .slogan { padding: 8px 16px 0; font-size: calc(22px * var(--sz)); line-height: 1.18; }
  .slogan span, .slogan em { display: block; }
  .sergi__bas { padding: 16px 16px 0; gap: 12px; }
  .sergi__bas h2 { font-size: calc(18px * var(--sz)); }
  .sergi__bas i { flex-basis: 36px; }
  .sergi__bas p { font-size: 12.5px; }
  .serit { gap: 30px; padding: 40px max(13vw, 16px) 12px; --ray-y: 10px; --hmax: calc(58vw * 1.344); }
  .eser--genis, .eser--yatay { --w: 72vw; --h: calc(72vw * .7); }
  .eser--dikey { --w: 58vw; --h: calc(58vw * 1.344); }
  .eser--kare { --w: 64vw; --h: 64vw; }
  .tel { top: calc(var(--ray-y) + 3px - 40px); height: calc(var(--pt) + 40px - var(--ray-y) - 3px); }
  .isik { width: calc(var(--w) * 1.6); top: -30px; height: calc(var(--pt) + var(--h) + 170px); }
  .isik::before { height: calc(var(--pt) + var(--h) * .72 + 30px); }
  .cerceve { --cer-p2: min(var(--cer-p), 9px); padding: var(--cer-p2); }
  .paspartu { padding: calc(var(--pas-p) * .62); }
  .fis { right: 22px; bottom: 22px; }
  .eser--orta .isik { opacity: 1; }
  /* etiket yapıtın genişliğinde kalır: dikey yapıtta 72vw komşunun yazısına biniyordu (TEKNİK UYGULAMA, 05.11) */
  .etiket { width: var(--w); margin-top: 18px; overflow-wrap: anywhere; }
  .etiket__incele { display: none; }
  .etiket__ad { font-size: calc(20px * var(--sz)); margin-top: 7px; }
  .etiket__cumle { font-size: 14px; margin-top: 6px; }
  .etiket__kim { font-size: 13px; margin-top: 5px; }
  .etiket__fiyat { font-size: 14px; }
  .kumanda { gap: 12px; padding: 2px 16px 14px; }
  .ok { width: 44px; height: 44px; }
  .sayac { min-width: 0; font-size: 13px; }
  .sayac span { display: none; }
  /* telefonda ipucu yok: tek başına ok ">" düğmesinin yanında ikinci ileri düğmesi gibi okunuyordu; şerit yine bir kez dürtülür */
  .ipucu, .ipucu[hidden] { display: none; }
  /* Tümü: ferah liste; küçük yapıt, ad, kimler için, fiyat */
  .katalog { padding: 14px 16px 10px; }
  .katalog__liste { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--cizgi-g); }
  .kat { position: relative; grid-template-columns: 104px minmax(0, 1fr) 18px; grid-template-rows: auto auto auto auto; column-gap: 16px; row-gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--cizgi); align-items: center; align-content: center; min-height: 116px; }
  .kat::after { content: "→"; grid-column: 3; grid-row: 1 / 5; align-self: center; color: var(--soluk); font: 400 16px/1 var(--sans); }
  .kat__kucuk { grid-column: 1; grid-row: 1 / 5; align-self: center; margin: 0; padding: 4px; aspect-ratio: 1 / 1; }
  .kat__tuval { border-width: 6px; }
  .kat__no { grid-column: 2; font-size: 11.5px; }
  .kat__ad { grid-column: 2; font-size: calc(18.5px * var(--sz)); line-height: 1.2; }
  .kat__kim { grid-column: 2; font-size: 13px; line-height: 1.35; }
  .kat__fiyat { grid-column: 2; margin-top: 2px; font-size: 14px; }
  .soz { padding: 64px 16px 26px; }
  .soz__liste { grid-template-columns: 1fr; }
  .soz__liste li, .soz__liste li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--cizgi); font-size: calc(22px * var(--sz)); }
  .kunye { margin: 0 16px; padding-bottom: 84px; }
  .kunye a { margin: 0; }

  .s-kapat { top: 10px; right: 10px; padding: 0 14px; }
  .s-kapat em { display: none; }
  .salon__ic { padding: 20px 16px 100px; overflow-x: clip; }
  .s-giris { padding-top: 34px; gap: 30px; }
  .s-eser { justify-self: center; }
  .s-eser .cerceve { width: calc(var(--w) * 1.18); max-width: calc(100vw - 32px); padding: min(calc(var(--cer-p) + 2px), 10px); }
  .s-eser .paspartu { padding: calc(var(--pas-p) * .75); }
  .s-eser .fis { right: 26px; bottom: 26px; }
  .s-eser .isik { width: calc(var(--w) * 1.9); top: -40px; height: calc(var(--h) * 1.18 + 200px); }
  .s-etiket h1, .s-etiket h2 { font-size: calc(38px * var(--sz)); }
  .s-kunye > div { grid-template-columns: 1fr; gap: 4px; }
  .s-bas { margin-top: 56px; flex-direction: column; gap: 6px; }
  .s-bas h3, .s-alt h3 { font-size: calc(26px * var(--sz)); }
  .s-bento { grid-template-columns: 1fr; grid-auto-rows: 270px; gap: 24px; margin-top: 20px; }
  .s-bento--4 .adim:nth-child(n), .s-bento--5 .adim:nth-child(n) { grid-column: auto; grid-row: auto; }
  .adim__b { padding: 14px 16px; }
  .adim__b b { font-size: calc(19px * var(--sz)); }
  .s-alt { grid-template-columns: 1fr; gap: 50px; margin-top: 60px; }
  .s-fiyat { padding: 24px 20px 24px; }
  .s-dugme { width: 100%; }
  .s-form { padding: 24px 18px; margin-top: 50px; }
  .s-form__alanlar { grid-template-columns: 1fr; }
  .alan--genis { grid-column: auto; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .salon .s-salon, .salon .s-etiket, .salon .s-bas, .salon .adim, .salon .s-alt, .salon__zemin, .s-kapat { opacity: 1 !important; translate: none !important; }
  .s-eser .isik { opacity: 1; }
  .tuval .sahne { transform: none; }
}

/* Akan logo şeridi (_ortak/logo-serit.css) bu sayfanın renkleriyle: beyaz plakalar mavi duvarda */
#logolar { --ls-yazi: var(--yazi); --ls-soluk: var(--soluk); --ls-yazi-tipi: var(--serif); --ls-cizgi: rgb(255 255 255 / .3); --ls-plaka: #fbf9f5; }
#logolar .ls__sayi { opacity: 1; }

/* gönderilen formda alanlar gizlenir */
.s-form [hidden] { display: none !important; }

/* teklif formu: seçim kutusu ve "biri yeter" notu */
.alan select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.alan select option { color: #0B2236; }
.s-form__not { margin: 14px 0 0; font-size: 14px; color: var(--s-soluk); }

/* ---------- Sık sorulanlar ---------- */
.sss { padding: 8px 56px 40px; }
.sss__liste { border-top: 1px solid var(--cizgi); max-width: 900px; }
.sss__s { border-bottom: 1px solid var(--cizgi); }
.sss__s summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; font: var(--orta) 18px/1.3 var(--sans); color: var(--yazi); }
.sss__s summary::-webkit-details-marker { display: none; }
.sss__s summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--turuncu); transition: transform .3s; }
.sss__s[open] summary::after { transform: rotate(45deg); }
.sss__s p { margin: 0 0 18px; max-width: 70ch; color: var(--soluk); font: var(--govde) 16.5px/1.55 var(--sans); }
@media (max-width: 700px) { .sss { padding: 0 16px 28px; } .sss__s summary { font-size: 16.5px; } }

/* ---------- telefonda alttaki çağrı çubuğu ---------- */
.alt-cagri { display: none; }
@media (max-width: 700px) {
  .alt-cagri { display: flex; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
    min-height: 52px; align-items: center; justify-content: center; gap: 8px; background: var(--turuncu); color: var(--turuncu-yazi);
    font: var(--orta) 16px/1 var(--sans); text-decoration: none; box-shadow: 0 10px 28px -10px rgb(0 0 0 / .5);
    transform: translateY(140%); transition: transform .35s ease; }
  .alt-cagri--gorunur { transform: none; }
  html.salon-acik .alt-cagri { transform: translateY(140%); }
  .kunye { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { .alt-cagri { transition: none; } }

/* ---------- komisyon hesaplayıcı (sipariş salonu) ---------- */
.hesap { margin: 56px 0 0; padding: 32px 36px; background: var(--s-kart); box-shadow: inset 0 0 0 1px var(--s-kart-kenar); }
.hesap h3 { margin: 0 0 18px; font: var(--orta) 22px/1.2 var(--sans); }
.hesap__alanlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; }
.hesap input[type="range"] { width: 100%; accent-color: var(--s-vurgu); min-height: 44px; }
.hesap__oran { font: var(--orta) 15px/1 var(--sans); color: var(--s-yazi); }
.hesap__sonuc { margin: 22px 0 8px; font: var(--govde) 19px/1.5 var(--sans); }
.hesap__sonuc b { color: var(--s-vurgu); font-weight: var(--orta); }
.hesap__not { margin: 0; font-size: 13.5px; color: var(--s-soluk); }
@media (max-width: 900px) { .hesap__alanlar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hesap { padding: 22px 18px; } .hesap__alanlar { grid-template-columns: 1fr; } }

/* ---------- tur 3: kapanış bandı, sözümüz açılır, salon gezinme, telefonda salon çubuğu, form uyarısı ---------- */
h1.slogan { margin: 0; }
.kapanis { margin: 8px 56px 40px; padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: rgb(6 54 92 / .55); box-shadow: inset 0 0 0 1px var(--cizgi); }
.kapanis p { margin: 0; font: var(--orta) clamp(19px, 1.9vw, 24px)/1.3 var(--sans); }
.kapanis__d { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; background: var(--turuncu); color: var(--turuncu-yazi);
  font: var(--orta) 16px/1 var(--sans); text-decoration: none; }
.kapanis__d:hover { background: var(--turuncu-h); }
@media (max-width: 700px) { .kapanis { margin: 0 16px 28px; padding: 22px 18px; } .kapanis__d { width: 100%; justify-content: center; } }
.soz__s summary { cursor: pointer; list-style: none; }
.soz__s summary::-webkit-details-marker { display: none; }
.soz__s summary::after { content: " +"; color: var(--turuncu); font-weight: 300; }
.soz__s[open] summary::after { content: " –"; }
.soz__s p { margin: 10px 0 6px; font: var(--govde) 15.5px/1.5 var(--sans); color: var(--soluk); letter-spacing: 0; }
.s-gezin { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--s-cizgi); }
.s-gezin a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--s-yazi); text-decoration: none; font: var(--orta) 16px/1 var(--sans); }
.s-gezin a:hover { color: var(--s-vurgu); }
.s-cubuk { display: none; }
@media (max-width: 700px) {
  .s-cubuk { display: flex; position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 6; margin-top: 24px; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 16px; background: var(--s-kart); box-shadow: inset 0 0 0 1px var(--s-kart-kenar), 0 12px 28px -12px rgb(0 0 0 / .6); transition: opacity .25s, transform .25s; }
  .s-cubuk b { font: var(--orta) 16px/1.2 var(--sans); color: var(--s-yazi); }
  .s-cubuk__d { min-height: 46px; padding: 0 18px; border: 0; background: var(--turuncu); color: var(--turuncu-yazi); font: var(--orta) 15px/1 var(--sans); cursor: pointer; }
  .s-cubuk--gizli { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
.alan__hata { display: block; margin-top: 6px; color: #ffd2a8; font: var(--orta) 13.5px/1.3 var(--sans); }
.alan__hata:empty { display: none; }
.onay .alan__hata { margin-top: 4px; }

/* telefonda üst çubuk sade: "Ücretsiz kontrol" alttaki çubukta; ad tek satır */
@media (max-width: 480px) {
  .iletisim { display: none; }
  .marka__ad { white-space: nowrap; }
}

/* ---------- hizmetin kendi cümlesi ve kimler için (salonda) ---------- */
.s-kim { margin-top: 10px; color: var(--s-soluk); font: var(--ince) 16px/1.45 var(--sans); }

/* ---------- formda yeniden gönder ---------- */
.s-form__yeni { margin-top: 14px; min-height: 44px; padding: 0 18px; border: 1px solid var(--s-cizgi); background: transparent; color: var(--s-yazi); cursor: pointer; font: var(--govde) 15px/1 var(--sans); }
.s-form__yeni:hover { border-color: var(--s-yazi); }

/* ---------- kişisel veriler penceresi (sayfadan çıkmadan) ---------- */
.pencere { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; background: #f4f8fb; color: #0b2236;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); font: 400 16.5px/1.6 var(--sans); }
.pencere::backdrop { background: rgb(2 20 40 / .6); }
.pencere[open] { display: flex; flex-direction: column; }
.pencere__ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 26px; border-top: 6px solid var(--turuncu); border-bottom: 1px solid rgb(11 34 54 / .12); }
.pencere__ust p { margin: 0; font: 600 18px/1.2 var(--sans); }
.pencere__kapat { width: 44px; height: 44px; border: 0; background: transparent; color: #0b2236; cursor: pointer; font: 300 30px/1 var(--sans); }
.pencere__ic { overflow-y: auto; padding: 6px 26px 26px; overscroll-behavior: contain; }
.pencere__ic h1 { display: none; }
.pencere__ic h2 { margin: 22px 0 6px; font: 600 18px/1.3 var(--sans); color: #066ca8; }
.pencere__ic p { margin: 0 0 10px; color: #24394d; }
.pencere__ic a { color: #066ca8; }
.pencere :focus-visible { outline-color: #066ca8; box-shadow: none; }
@media (max-width: 560px) { .pencere__ic { padding: 4px 18px 22px; } .pencere__ust { padding-left: 18px; } }

/* ---------- logo şeridi elle kaydırılır ---------- */
.ls__pencere { cursor: grab; touch-action: pan-y; user-select: none; }
.ls__pencere.ls--tut { cursor: grabbing; }
.ls__plaka img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- hizmet sayfasının üstü: marka (anasayfayla aynı yer ve boy) + önceki / sonraki hizmet ---------- */
.s-ust { position: relative; z-index: 1; }
.salon .s-ust { opacity: 0; transition: opacity .5s ease; }
.salon--acik .s-ust { opacity: 1; }
.salon--kapaniyor .s-ust { opacity: 0; transition-duration: .3s; }
.salon__ic { padding-top: 22px; }
.s-gezin--ust { margin-top: 0; padding-top: 0; padding-bottom: 14px; border-top: 0; border-bottom: 1px solid var(--s-cizgi); align-items: center; }
.s-gezin--ust a { font-size: 15px; }
.s-gezin--ust .s-salon { flex: 0 1 auto; }
.salon .s-gezin--ust { opacity: 0; translate: 0 18px; transition: opacity 1s ease .35s, translate 1.2s var(--yavas) .35s; }
.salon--acik .s-gezin--ust { opacity: 1; translate: none; }
.salon--kapaniyor .s-gezin--ust { opacity: 0 !important; transition: opacity .35s ease !important; }
@media (max-width: 700px) {
  .salon__ic { padding-top: 12px; }
  .s-gezin--ust { flex-wrap: wrap; row-gap: 0; }
  .s-gezin--ust .s-salon { order: -1; flex: 1 0 100%; padding: 4px 0 2px; }
  .s-gezin--ust a { font-size: 14px; min-height: 44px; }
  .s-gezin a { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .salon .s-ust, .salon .s-gezin--ust { opacity: 1 !important; translate: none !important; } }
.s-gezin--ust .s-salon b, .s-gezin--ust .s-salon span { white-space: nowrap; }
@media (max-width: 700px) {
  /* telefonda iki bağlantı yan yana iki sütun; uzun ad sütununda alt satıra geçer */
  .s-gezin--ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .s-gezin--ust .s-salon { grid-column: 1 / -1; }
  .s-gezin--ust a { line-height: 1.25; }
  .s-gezin--ust a[data-gec="1"] { justify-content: flex-end; text-align: right; }
}

/* ---------- hizmetin kendi sayfası: betik açılmadan önce görünen yazı (Google ve betiksiz tarayıcı için) ---------- */
.seo-hizmet { max-width: 860px; padding: 40px 0 60px; }
.seo-hizmet h1 { margin: 12px 0 14px; font: var(--sw) calc(clamp(36px, 5vw, 64px) * var(--sz))/1.05 var(--serif); letter-spacing: var(--siz-b); }
.seo-hizmet h2 { margin: 34px 0 10px; font: var(--orta) 22px/1.2 var(--sans); }
.seo-hizmet p, .seo-hizmet li, .seo-hizmet dd { color: var(--s-soluk); font-size: 17px; line-height: 1.55; }
.seo-hizmet .seo-cumle { color: var(--s-yazi); font-size: 20px; }
.seo-hizmet ol, .seo-hizmet ul { padding-left: 1.2em; }
.seo-hizmet dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin-top: 18px; }
.seo-hizmet dt { color: var(--s-soluk); }
.seo-hizmet dd { margin: 0; color: var(--s-yazi); }
.seo-hizmet .s-dugme { margin-top: 26px; display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- sayfa altında bütün hizmetlerin bağlantıları (Google ve hızlı geçiş) ---------- */
.kunye__hizmetler { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; padding: 0; list-style: none; }
.kunye__hizmetler a { text-decoration: none; color: var(--soluk); }
.kunye__hizmetler a:hover { color: var(--yazi); text-decoration: underline; }