/* ── Başlayalım ve sonsuzluk bölümü ── (şablon tools/yama/ana-sayfa.html, davranış assets/sonsuzluk.js, README → "Ana sayfa girişi")
   Yusuf, 12.10.2026: "ben referanslardaki gibi 3 boyutlu bir yapı istiyorum her bir çizginin önünde butonlar olacaktı gerektiği yerde
   hareket edebilecekti. Hap menüde bu yapıya hiç rastlamayacağız buna sadece başlayalıma bastığımda sayfa bir anda sağa geçip(sağdan sola
   kayarak) o kısıma gelecekti." 13.10.2026: "Sonsuzluk 3D modeli gerçekten flovey logosundaki yapıya benzemeli. … Butonların rengi ve yapısı
   daha çok sitenin modern yapısına uygun olsun. … Telefonda dikey olarak ayrı bir tasarım modeli düşünülebilir."
   - Bölüm (nav.sz) girişin (.ag) içindedir; rakam yağmuru iki panelin ortak arka planıdır, yalnız ön plan kayar: html.sz-acik iken giriş
     içeriği sola çıkar, bölüm sağdan gelir. html.sz-anlik geçişsizdir (hareketi azalt, doğrudan #sonsuzluk). html.sz-canli: betik sahneyi kurdu.
   - Düğmeler başlık haplarının ailesindendir: koyu cam zemin, ince renk geçişli kenar (seçilince kenarda ışık turu), sayfanın çizgi simgesi
     Archivo ad ve mono sıra numarası. Renkleri bağlı oldukları logo çizgisinin ışığından (--sz-renk: mavi,
     turuncu, mor); Turan mavisi vurgu (simge), düz dolgu değil. Yerlerini ve büyüklüklerini betik her karede
     3B izdüşümden verir (li'nin transform'u); düğme yapıyla birlikte hafifçe döner, üzerine gelince imlece doğru eğilir (--rx, --ry) ve
     zemini imlecin altında kendi renginde aydınlanır (--mx, --my; sitedeki paket kartlarının ışığı gibi).
   - Betik yoksa bölüm girişin altında düz bir bağlantı listesidir; betik var ama sahne kurulamadıysa gizlidir (Başlayalım bağlantı olarak kalır).
   - SEO (Emir, 13.10.2026: "Metni kesinlikle ekle", "Sonsuzluğa teklif al düğmesi ayrıca ekle"; README → SEO): üstte sayfanın tek h1'i ve kısa
     tanıtım paragrafı (.sz-bas), her düğmede adın altında kısa tanım (.sz-tanim; telefonda sarmalın öbür yanında, aynı satırda). Altı düğme
     (Yusuf, 15.10.2026: FLOVEY kalktı): solda Hakkımızda, Web Sitelerimiz, Yazılımlar; sağda Reklam, Referanslar ve son düğme Teklif al
     (Turan mavisi dolgu: ana eylem; masaüstünde sağ altta, bağı mavi noktaya iner; telefonda en altta). Metinler gerçekten görünür; hiçbir
     ekran boyunda display:none, ekran dışı ya da saydam metinle saklanmaz (Google: gizli metin). */
@property --sz-aci { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ag { --sz-sure: .86s; --sz-egri: cubic-bezier(.76, 0, .24, 1); } /* kayma: giriş içeriği ve bölüm aynı süre ve eğriyle */
.sz { color: var(--murekkep); }
.sz-bas { text-align: center; }
.sz-baslik { margin: 0 auto; max-width: 34ch; font: 700 clamp(24px, 2.35vw, 40px)/1.1 'Archivo', sans-serif; font-stretch: 108%; letter-spacing: -.014em; text-wrap: balance; }
.sz-baslik em { font: italic 400 1.14em/1 'Instrument Serif', Georgia, serif; letter-spacing: 0; }
.sz-baslik:focus { outline: none; }
.sz-giris { max-width: 68ch; margin: clamp(10px, 1.6vh, 16px) auto 0; font: 400 clamp(14px, 1.08vw, 17px)/1.5 'Archivo', sans-serif; color: rgba(245, 248, 250, .74);
  text-wrap: pretty; }
.sz-liste { list-style: none; margin: 0; padding: 0; }

/* ---- düğme ---- */
.sz-dugme { --sz-renk: var(--turan); --rx: 0deg; --ry: 0deg; --tz: 0px; position: relative; z-index: 0; display: flex; align-items: center; gap: 11px;
  box-sizing: border-box; height: 60px; padding: 0 15px 0 9px; border-radius: 19px; color: var(--murekkep); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(25, 32, 41, .8), rgba(8, 11, 15, .88));
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .95), 0 0 40px -22px color-mix(in srgb, var(--sz-renk) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  transform: perspective(640px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz)); transform-style: preserve-3d;
  transition: background .35s var(--egri), box-shadow .45s var(--egri); -webkit-tap-highlight-color: transparent; }
/* bağlı olduğu logo çizgisinin ışığı (sonsuzluk.js'teki YER ile aynı; nokta simetrik, her renkte iki): orta çizgi mavi (Hakkımızda, Teklif al),
   sol ilmeğin dış çizgisi mor (Web Sitelerimiz, Yazılımlar), sağ ilmeğin dış çizgisi turuncu (Reklam, Referanslar) */
.sz-dugme[data-id="hakkimizda"], .sz-dugme[data-id="teklif"] { --sz-renk: #2FBDFF; }
.sz-dugme[data-id="abonelikler"], .sz-dugme[data-id="yazilim"] { --sz-renk: #B28CFF; }
.sz-dugme[data-id="reklam"], .sz-dugme[data-id="referans"] { --sz-renk: #FF9234; }
/* kenar: başlık haplarındaki renk geçişli hat; seçilince üstünden ışık turu döner */
.sz-dugme::before, .sz-dugme::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sz-dugme::before { background: linear-gradient(110deg, color-mix(in srgb, var(--sz-renk) 80%, #fff), #6C7BFF 30%, #C86BFF 48%, #FF5FA2 64%, #FF8B2B 80%, #FFD15C 94%);
  opacity: .36; transition: opacity .4s var(--egri); }
.sz-dugme::after { padding: 1.5px; opacity: 0; transition: opacity .3s ease;
  background: conic-gradient(from var(--sz-aci), transparent 0 50%, color-mix(in srgb, var(--sz-renk) 70%, transparent) 64%, #fff 72%, var(--sz-renk) 80%, transparent 94%); }
.sz-simge { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  color: color-mix(in srgb, var(--sz-renk) 72%, #fff);
  background: radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--sz-renk) 30%, transparent), color-mix(in srgb, var(--sz-renk) 7%, transparent) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sz-renk) 40%, transparent); transition: background .35s var(--egri), box-shadow .35s var(--egri); }
.sz-simge svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sz-yazi { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sz-ad { font: 600 15.5px/1 'Archivo', sans-serif; font-stretch: 104%; letter-spacing: -.008em; }
.sz-tanim { font: 400 12.5px/1.2 'Archivo', sans-serif; color: rgba(245, 248, 250, .62); }
.sz-tek { white-space: nowrap; } /* "e-ticaret" tireden bölünmez */
.sz-no { margin-left: auto; padding-left: 10px; font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .05em; color: rgba(245, 248, 250, .4); }
.sz-dugme.secili, .sz-dugme:focus-visible { --tz: 18px;
  background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sz-renk) 26%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(40, 52, 66, .9), rgba(13, 18, 25, .92));
  box-shadow: 0 26px 52px -22px rgba(0, 0, 0, .95), 0 0 54px -16px color-mix(in srgb, var(--sz-renk) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12); }
.sz-dugme.secili::before, .sz-dugme:focus-visible::before { opacity: .7; }
.sz-dugme.secili::after, .sz-dugme:focus-visible::after { opacity: 1; animation: sz-tur 2.2s linear infinite; }
.sz-dugme.secili .sz-simge, .sz-dugme:focus-visible .sz-simge { background: radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--sz-renk) 48%, transparent), color-mix(in srgb, var(--sz-renk) 14%, transparent) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sz-renk) 70%, transparent), 0 0 18px -4px var(--sz-renk); }
.sz-dugme:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 5px; }
@keyframes sz-tur { to { --sz-aci: 360deg; } }
/* Teklif al: ana eylem, Başlayalım gibi Turan mavisi dolgu (yazı beyaz); kenar hattı yerine iç parıltı, numara yerine ok */
.sz-dugme[data-id="teklif"] { color: var(--beyaz); background: linear-gradient(180deg, var(--turan-parlak), var(--turan));
  box-shadow: 0 20px 46px -18px rgba(0, 163, 224, .95), 0 0 46px -16px rgba(25, 180, 238, .75), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sz-dugme[data-id="teklif"]::before { opacity: 0; }
.sz-dugme[data-id="teklif"] .sz-simge { color: var(--beyaz); background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.sz-dugme[data-id="teklif"] .sz-tanim { color: rgba(255, 255, 255, .88); }
.sz-dugme[data-id="teklif"] .sz-ileri { color: var(--beyaz); }
.sz-ileri .ok { display: block; width: 18px; height: 11px; transition: translate .3s var(--egri); }
.sz-dugme[data-id="teklif"].secili, .sz-dugme[data-id="teklif"]:focus-visible { background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 72%),
    linear-gradient(180deg, #3CC4F5, var(--turan-parlak));
  box-shadow: 0 26px 54px -20px rgba(0, 163, 224, 1), 0 0 60px -14px rgba(25, 180, 238, .95), inset 0 1px 0 rgba(255, 255, 255, .36); }
.sz-dugme[data-id="teklif"].secili .sz-simge, .sz-dugme[data-id="teklif"]:focus-visible .sz-simge { background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.sz-dugme[data-id="teklif"].secili .sz-ileri .ok, .sz-dugme[data-id="teklif"]:focus-visible .sz-ileri .ok { translate: 3px 0; }

/* ---- betiksiz: girişin altında düz bağlantı listesi ---- */
.js-yok .ag { height: auto; min-height: 100vh; padding: clamp(96px, 14vh, 150px) 0 clamp(56px, 9vh, 100px); row-gap: 7vh; }
.js-yok .sz { position: relative; z-index: 1; width: 100%; padding: 0 16px; box-sizing: border-box; }
.js-yok .sz-bas { max-width: 860px; margin: 0 auto; }
.js-yok .sz-baslik { font-size: clamp(22px, 2.2vw, 34px); }
.js-yok .sz-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 980px; margin: 22px auto 0; }
.js-yok .sz-not, .js-yok .sz-geri { display: none; }
html:not(.js-yok):not(.sz-canli) .sz { display: none; }

/* ---- betikle: tam ekran panel; kapalıyken sağda, ekran dışında ---- */
html.sz-canli .ag { overflow: hidden; overflow: clip; }
html.sz-canli .sz { position: absolute; top: 0; left: 0; right: 0; height: 100%; max-height: 100vh; max-height: 100svh; z-index: 2; overflow: hidden; overflow: clip;
  translate: 100% 0; visibility: hidden; touch-action: pan-y; transition: translate var(--sz-sure) var(--sz-egri), visibility 0s linear var(--sz-sure); }
html.sz-acik .sz { translate: none; visibility: visible; transition: translate var(--sz-sure) var(--sz-egri), visibility 0s; }
/* ortadaki karartı: yağmur logonun ardında sakinleşir (panel kayarken onunla gelir) */
html.sz-canli .sz::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 56% at 50% 54%, rgba(5, 6, 8, .8) 0%, rgba(5, 6, 8, .55) 60%, rgba(5, 6, 8, .14) 100%); }
html.sz-canli .ag-icerik { transition: translate var(--sz-sure) var(--sz-egri), visibility 0s; }
html.sz-acik .ag-icerik { translate: -100% 0; visibility: hidden; transition: translate var(--sz-sure) var(--sz-egri), visibility 0s linear var(--sz-sure); }
html.sz-canli .ag-tuval { transition: opacity 1.1s ease; }
html.sz-acik .ag-tuval { opacity: .58; }
html.sz-anlik .sz, html.sz-anlik .ag-icerik, html.sz-anlik .ag-tuval { transition: none !important; }

html.sz-canli .sz-bas { position: absolute; z-index: 3; left: 16px; right: 16px;
  top: calc(clamp(14px, 2.4vh, 26px) + clamp(52px, 4.2vw, 62px) + clamp(12px, 2.4vh, 30px)); }
html.sz-canli .sz-sahne { position: absolute; inset: 0; z-index: 1; }
.sz-tuval { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
html.sz-canli .sz-liste { position: absolute; inset: 0; pointer-events: none; }
/* li sıfır boyutlu bir çapa: betik onu 3B yerine taşır; düğme çapanın üstünde ortalanır (--ox: genişliğin yarısı, betik ölçer) */
html.sz-canli .sz-liste > li { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; opacity: 0; }
html.sz-canli .sz-dugme { position: absolute; left: 0; top: 0; translate: -50% -50%; pointer-events: auto; touch-action: pan-y; }

/* açıklama ve geri */
html.sz-canli .sz-not { position: absolute; z-index: 3; left: 50%; bottom: clamp(18px, 4vh, 40px); width: min(560px, calc(100% - 340px)); min-height: 4.35em;
  margin: 0; translate: -50% 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; text-align: center;
  font: 400 15px/1.45 'Archivo', sans-serif; color: rgba(245, 248, 250, .64); pointer-events: none; }
.sz-not b { font-weight: 600; color: var(--murekkep); }
.sz-not > span:not(.sz-ipucu) { max-width: 52ch; }
.sz-ipucu-dokun { display: none; }
@media (hover: none) { .sz-ipucu-fare { display: none; } .sz-ipucu-dokun { display: inline; } html.sz-canli .sz-not:not(.dolu) { min-height: 1.5em; } }
.sz-not.dolu .sz-ipucu { display: none; }
.sz-geri { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--murekkep); background: rgba(10, 13, 17, .72); box-shadow: inset 0 0 0 1px rgba(245, 248, 250, .2);
  font: 500 15px/1 'Archivo', sans-serif; -webkit-tap-highlight-color: transparent; transition: background-color .25s ease, box-shadow .25s ease; }
.sz-geri .ok { width: 18px; height: 11px; flex: none; scale: -1 1; transition: translate .3s var(--egri); }
.sz-geri:hover, .sz-geri:focus-visible { background: rgba(22, 28, 36, .9); box-shadow: inset 0 0 0 1px rgba(245, 248, 250, .4); }
.sz-geri:hover .ok, .sz-geri:focus-visible .ok { translate: -3px 0; }
.sz-geri:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 4px; }
html.sz-canli .sz-geri { position: absolute; z-index: 3; left: clamp(14px, 1.4vw, 26px); bottom: clamp(18px, 4vh, 40px); }

/* geniş ekran: düğmeler logoyla birlikte büyür */
@media (min-width: 1680px) {
  .sz-dugme { height: 68px; gap: 13px; padding: 0 18px 0 10px; border-radius: 21px; }
  .sz-simge { width: 44px; height: 44px; border-radius: 14px; }
  .sz-simge svg { width: 24px; height: 24px; }
  .sz-ad { font-size: 17.5px; }
  .sz-tanim { font-size: 13.5px; }
  .sz-no { font-size: 11.5px; }
}
/* dar yatay ekran: düğmeler biraz küçülür (logoya yer kalsın) */
@media (max-width: 1180px) {
  .sz-dugme { height: 56px; gap: 9px; padding: 0 13px 0 8px; border-radius: 17px; }
  .sz-simge { width: 35px; height: 35px; border-radius: 11px; }
  .sz-ad { font-size: 14.5px; font-stretch: 100%; }
  .sz-tanim { font-size: 12px; }
}
/* alçak masaüstü penceresi (ör. 1280×600): üç sıra düğme yüksekliğe sığsın diye düğmeler biraz alçalır */
@media (min-height: 541px) and (max-height: 680px) and (orientation: landscape) {
  .sz-dugme { height: 52px; gap: 9px; padding: 0 13px 0 8px; border-radius: 16px; }
  .sz-simge { width: 34px; height: 34px; border-radius: 11px; }
  .sz-simge svg { width: 19px; height: 19px; }
  .sz-ad { font-size: 14.5px; }
  .sz-tanim { font-size: 12px; }
  .sz-yazi { gap: 4px; }
  /* açıklama başlığı satır içinde, iki satırlık yeri baştan ayrılır (seçilince büyüyüp alt sıradaki düğmelerin üstüne çıkmaz) */
  html.sz-canli .sz-not { display: block; box-sizing: border-box; min-height: 2.9em; width: min(720px, calc(100% - 344px)); font-size: 14px; line-height: 1.45; }
  html.sz-canli .sz-not:not(.dolu) { padding-top: 1.45em; }
  .sz-not b { margin-right: .35em; }
}
/* dikey ekran (telefon, dik tablet; betik data-model="sarmal" koyar): örgülü sarmalın iki yanında sırayla duran haplar. Örgüyü örtmesinler
   diye bir yanda kalan genişliğe sığarlar (--sz-kenar, betik verir); telefonda sıra numarası (ve Teklif al'ın oku) yok */
.sz[data-model="sarmal"] .sz-dugme { height: 56px; gap: 9px; padding: 0 13px 0 8px; border-radius: 19px; max-width: var(--sz-kenar, 220px); }
.sz[data-model="sarmal"] .sz-simge { width: 36px; height: 36px; border-radius: 12px; }
.sz[data-model="sarmal"] .sz-ad { font-size: 15px; font-stretch: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.12; text-wrap: balance; } /* uzun ad ("Web Sitelerimiz") dar yanda iki satıra iner */
/* telefonda tanım düğmenin içine sığmaz: aynı satırda, örgünün öbür yanında durur (iç kenarı örgünün zarfında; --sz-karsi = iki zarf, betik verir).
   Düğmeler sırayla iki yanda olduğundan o yan o satırda boştur; tanım düğmenin bağlantısının parçasıdır (dokununca aynı sayfa) */
.sz[data-model="sarmal"] .sz-tanim { position: absolute; top: 50%; translate: 0 -50%; width: var(--sz-kenar, 140px); font-size: 12.5px; line-height: 1.3; white-space: normal;
  text-wrap: balance; color: rgba(245, 248, 250, .66); pointer-events: none; }
.sz[data-model="sarmal"] [data-yan="sol"] .sz-tanim { left: calc(100% + var(--sz-karsi, 96px)); text-align: left; }
.sz[data-model="sarmal"] [data-yan="sag"] .sz-tanim { right: calc(100% + var(--sz-karsi, 96px)); text-align: right; }
.sz[data-model="sarmal"] .sz-dugme[data-id="teklif"] .sz-tanim { color: rgba(184, 230, 252, .92); }
.sz[data-model="sarmal"] .sz-dugme[data-id="teklif"] .sz-ad { white-space: nowrap; } /* "Teklif al" tek satır (düğme en dar içeriğe göre ölçülür) */
@media (max-width: 599px) { .sz[data-model="sarmal"] .sz-no { display: none; } }
@media (min-width: 600px) { .sz[data-model="sarmal"] .sz-dugme { height: 62px; gap: 12px; padding: 0 18px 0 10px; border-radius: 21px; }
  .sz[data-model="sarmal"] .sz-simge { width: 42px; height: 42px; } .sz[data-model="sarmal"] .sz-ad { font-size: 17px; } .sz[data-model="sarmal"] .sz-tanim { font-size: 14px; } }
@media (max-width: 380px) { .sz[data-model="sarmal"] .sz-dugme { gap: 8px; padding: 0 11px 0 7px; } .sz[data-model="sarmal"] .sz-ad { font-size: 14px; font-stretch: 94%; }
  .sz[data-model="sarmal"] .sz-simge { width: 32px; height: 32px; border-radius: 11px; } }
/* dar ekran: açıklama geri düğmesinin üstünde, geri düğmesi ortada */
@media (max-width: 640px) {
  html.sz-canli .sz-not { width: calc(100% - 32px); bottom: calc(clamp(18px, 4vh, 40px) + 58px); min-height: 4.35em; font-size: 14px; }
  html.sz-canli .sz-geri { left: 50%; translate: -50% 0; }
}
/* yatay telefon: h1 ve paragraf küçülür, iki başlık hapının arasına oturur (--sz-sol, --sz-sag: betik ölçer); düğmeler küçük */
@media (max-height: 540px) and (orientation: landscape) {
  .sz-dugme { height: 46px; gap: 8px; padding: 0 11px 0 6px; border-radius: 15px; }
  .sz-simge { width: 32px; height: 32px; border-radius: 10px; }
  .sz-simge svg { width: 18px; height: 18px; }
  .sz-ad { font-size: 14px; font-stretch: 96%; }
  .sz-tanim { font-size: 11.5px; }
  .sz-yazi { gap: 3px; }
  html.sz-canli .sz-bas { top: 12px; left: calc(var(--sz-sol, 250px) + 20px); right: calc(var(--sz-sag, 0px) + 20px); }
  .sz-baslik { font-size: 18px; max-width: none; }
  .sz-giris { margin-top: 5px; font-size: 12.5px; line-height: 1.4; }
  /* açıklama: başlığı satır içinde, Girişe dön ile sağ alttaki iletişim düğmeleri arasında; iki satırlık yeri baştan ayrılır (betik
     düğmeleri onun üstüne dizer: seçilince büyüyüp alt sıradaki düğmelerin üstüne çıkmaz) */
  html.sz-canli .sz-not { display: block; box-sizing: border-box; bottom: 12px; min-height: 2.9em; width: min(620px, calc(100% - 344px)); font-size: 13px; line-height: 1.45; }
  html.sz-canli .sz-not:not(.dolu) { padding-top: 1.45em; }
  .sz-not b { margin-right: .35em; }
  html.sz-canli .sz-geri { bottom: 12px; height: 44px; }
}
/* kısa dik ekran (ör. 360×640, 375×667): h1, paragraf ve düğmeler biraz küçülür; dokunmatikte "Sürükleyerek çevirin" ipucu yer açmak için
   çıkar (yalnız arayüz ipucu; içerik metni değil) */
@media (orientation: portrait) and (max-height: 720px) {
  html.sz-canli .sz-bas { top: calc(clamp(14px, 2.4vh, 26px) + clamp(52px, 4.2vw, 62px) + 8px); }
  .sz-baslik { font-size: 22px; }
  .sz-giris { margin-top: 8px; font-size: 13px; line-height: 1.42; }
  .sz[data-model="sarmal"] .sz-dugme { height: 50px; }
  .sz[data-model="sarmal"] .sz-simge { width: 32px; height: 32px; border-radius: 11px; }
  .sz[data-model="sarmal"] .sz-tanim { font-size: 12px; }
}
@media (orientation: portrait) and (max-height: 720px) and (hover: none) {
  .sz-not:not(.dolu) .sz-ipucu-dokun { display: none; }
  html.sz-canli .sz-not:not(.dolu) { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sz-dugme, .sz-dugme::before, .sz-dugme::after, .sz-simge, .sz-geri .ok, .sz-ileri .ok { transition: none; }
  .sz-dugme.secili::after, .sz-dugme:focus-visible::after { animation: none; --sz-aci: 140deg; }
}
@media (forced-colors: active) {
  .sz-tuval { display: none; }
  .sz-dugme { border: 2px solid ButtonText; }
  .sz-dugme::before, .sz-dugme::after { display: none; }
}