/* Phone first. Pop-art around the question (K13), calm around the dua. */
:root {
  --mandalina: #FC6420;
  --ink: #2A1A1C;
  --cream: #FFF4E4;
  --sun: #FFD23F;
  --night: #1C1A42;
  --wine: #5B1E24;
  --amber: #FFC98A;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --disp: Fredoka, ui-rounded, system-ui, sans-serif;
  --body: Figtree, system-ui, -apple-system, sans-serif;
  --serif: Fraunces, Georgia, serif;
  --spring: cubic-bezier(.2, 1.6, .4, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--mandalina); }
html:has(.dua-sayfa) { background: var(--night); }
html:has(.belge-sayfa) { background: var(--cream); }
body { margin: 0; min-height: 100dvh; background: var(--mandalina); color: var(--ink); font: 400 18px/1.45 var(--body); overflow-x: clip; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3 { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
.night :focus-visible, .wine :focus-visible, .reader :focus-visible { outline-color: var(--sun); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 64px; }

.nav { position: fixed; z-index: 20; top: env(safe-area-inset-top, 0px); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--gutter-r) 10px var(--gutter-l); pointer-events: none; transition: transform .35s ease; }
.nav > * { pointer-events: auto; }
.nav-gizli .nav:not(:focus-within) { transform: translateY(-120%); }
.dua-sayfa .nav, .belge-sayfa .nav { position: absolute; }
.logo { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font: 700 21px var(--disp); text-decoration: none; transition: transform .25s var(--spring); }
.logo img { border-radius: 50%; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 16px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--sun); color: var(--ink); font: 600 15px var(--disp); white-space: nowrap; text-decoration: none; box-shadow: 0 4px 0 var(--ink); transition: transform .12s, box-shadow .12s, opacity .25s; }
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pill.wide { min-height: 60px; font-size: 21px; width: 100%; }
.dock { position: fixed; z-index: 19; left: var(--gutter-l); right: var(--gutter-r); bottom: max(14px, env(safe-area-inset-bottom, 0px)); min-height: 54px; font-size: 18px; transform: translateY(140%); transition: transform .5s var(--spring); }
.dock.show { transform: none; }
.dock-on .nav .pill { opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .dock { display: none; } .dock-on .nav .pill { opacity: 1; pointer-events: auto; } }

/* Hero: one column that shares any screen height, so nothing collides. */
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 480px; overflow: hidden; background: var(--mandalina); display: flex; flex-direction: column; isolation: isolate; }
.head { flex: none; padding: calc(68px + env(safe-area-inset-top, 0px)) var(--gutter-r) 0 var(--gutter-l); text-align: center; }
h1 { margin-inline: auto; max-width: 11.5em; font: 700 clamp(38px, 10.4vw, 84px)/1.02 var(--disp); letter-spacing: -.01em; color: var(--cream); text-shadow: 3px 4px 0 var(--ink); text-wrap: balance; }
.w { display: inline-block; animation: wordin .75s var(--d, 0s) var(--spring) backwards; }
@keyframes wordin { from { opacity: 0; transform: translateY(46px) rotate(5deg) scale(.86); } }
.hl { display: inline-block; font-size: min(1em, 8.8vw); white-space: nowrap; padding: 0 .16em; margin-top: .1em; border: 3px solid var(--ink); border-radius: .2em; background: var(--sun); color: var(--ink); text-shadow: none; box-shadow: 4px 5px 0 var(--ink); transform: rotate(-1.4deg); animation: stamp .7s .55s var(--spring) backwards; }
@keyframes stamp { from { opacity: 0; transform: scale(2) rotate(8deg); } }

.ask { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding-inline: var(--gutter-l) var(--gutter-r); }
.q { font: 600 clamp(19px, 5vw, 28px)/1.15 var(--disp); text-align: center; animation: wordin .6s .95s var(--spring) backwards; }
.chips { width: 100%; max-width: 620px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.chip { min-height: 48px; padding-inline: 8px; border: 2.5px solid var(--ink); border-radius: 15px; background: var(--cream); font: 600 clamp(17px, 4.6vw, 21px) var(--disp); box-shadow: 0 5px 0 var(--ink); animation: bubin .6s var(--d) var(--spring) backwards; transition: transform .25s var(--spring), box-shadow .14s, background .25s; }
@keyframes bubin { from { opacity: 0; transform: scale(0) rotate(-14deg); } }
.chip.hint { background: var(--sun); transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 7px 0 var(--ink); }
.chip:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: .08s; }

.say { flex: none; align-self: center; position: relative; z-index: 3; margin-bottom: -6px; width: max-content; max-width: 88vw; padding: 7px 14px; border: 2.5px solid var(--ink); border-radius: 15px; background: #fff; font: 600 16px var(--disp); box-shadow: 3px 4px 0 var(--ink); animation: sayin .6s 1.9s var(--spring) backwards; }
.say.swap { animation: sayswap .45s var(--spring); }
@keyframes sayin { from { opacity: 0; scale: .4; } }
@keyframes sayswap { from { opacity: .2; scale: .7; } }

.sticker { filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(4px 6px 0 var(--ink)); }
.gang { position: relative; flex: none; width: 100%; max-width: 880px; align-self: center; height: clamp(104px, 25vh, 280px); margin-bottom: -10px; }
.mate { position: absolute; bottom: 0; animation: var(--in) 1.1s var(--dl) cubic-bezier(.25, 1.1, .4, 1) backwards; }
.m1 { --in: rollL; --dl: .6s; left: 1%; width: 32%; max-width: 235px; }
.m2 { --in: rise2; --dl: .95s; z-index: 2; left: 50%; width: 42%; max-width: 280px; aspect-ratio: 1; translate: -50% 0; cursor: pointer; }
.m1 img, .m3 img { cursor: pointer; }
.mate img.hop { animation: hop .5s cubic-bezier(.3, 1.4, .5, 1); }
.m2.hop { animation: hop .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes hop { 0% { transform: scale(1.12, .84); } 40% { transform: translateY(-30%) scale(.94, 1.08); } 75% { transform: scale(1.06, .92); } 100% { transform: none; } }
.m3 { --in: rollR; --dl: .8s; right: 1%; width: 32%; max-width: 235px; }
@keyframes rollL { from { transform: translateX(-120vw) rotate(-720deg); } }
@keyframes rollR { from { transform: translateX(120vw) rotate(720deg); } }
@keyframes rise2 { from { transform: translateY(120%); } }
.m1 img, .m3 img { transform-origin: 50% 90%; animation: squish 2.8s ease-in-out infinite; }
.m3 img { animation-delay: -1.7s; }
@keyframes squish { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
.pose { position: absolute; inset: 0; width: 100%; opacity: 0; transform: scale(.6) translateY(16%); transform-origin: 50% 90%; transition: opacity .2s, transform .5s var(--spring); }
.pose.on { opacity: 1; transform: none; }

/* Reader: opens as a circle from the tapped chip and turns the mood calm. */
.reader { position: absolute; z-index: 10; inset: 0; background: radial-gradient(90% 60% at 50% 30%, #2C2F6B 0%, var(--night) 60%, #0E1330 100%); color: var(--cream); overflow-y: auto; overscroll-behavior: contain; animation: circle .6s cubic-bezier(.3, .7, .2, 1); }
@keyframes circle { from { clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%)); } to { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); } }
.r-in { min-height: 100%; max-width: 620px; margin-inline: auto; padding: calc(66px + env(safe-area-inset-top, 0px)) var(--gutter-r) 22px var(--gutter-l); display: flex; flex-direction: column; gap: 12px; }
.r-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.back { min-height: 44px; padding-inline: 2px; font: 600 16px var(--body); color: var(--amber); }
.r-for { font: 600 20px var(--disp); }
.r-m { align-self: center; width: clamp(84px, 15vh, 128px); transform-origin: 50% 90%; animation: bubin .6s .1s var(--spring) backwards, squish 4.5s ease-in-out .7s infinite; filter: drop-shadow(0 8px 18px #0008); }
.r-ar { font: 700 clamp(25px, 7vw, 38px)/1.65 Amiri, serif; text-align: center; }
.lbl { margin-bottom: 4px; font: 600 13px var(--body); letter-spacing: .04em; color: var(--amber); }
.r-tr { font: 500 italic 17px/1.35 var(--body); }
.r-me { font: 300 clamp(21px, 5.8vw, 28px)/1.22 var(--serif); }
.r-src { font: 600 14px var(--body); color: var(--amber); }
.r-end { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.r-ask { font: 500 16px/1.3 var(--body); text-align: center; }
.r-do { min-height: 54px; font-size: 18px; white-space: normal; text-align: center; }
.nur { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); pointer-events: none; }
.lift { animation: wordin .6s var(--d) cubic-bezier(.2, 1.2, .4, 1) backwards; }

/* Dua pages: what a searcher lands on. The answer comes first, with no games. */
.dua-sayfa { background: var(--night); color: var(--cream); }
.dua-m { max-width: 620px; margin-inline: auto; padding: calc(70px + env(safe-area-inset-top, 0px)) var(--gutter-r) 40px var(--gutter-l); display: flex; flex-direction: column; gap: 14px; }
.d-tam { min-height: 100dvh; justify-content: center; padding-block: 70px; }
.d-m { align-self: center; width: 104px; transform-origin: 50% 90%; animation: bubin .6s var(--spring) backwards, squish 4.5s ease-in-out .6s infinite; filter: drop-shadow(0 8px 18px #0008); }
.d-h { max-width: none; font: 700 clamp(36px, 10vw, 52px)/1.05 var(--disp); color: var(--cream); text-shadow: none; text-align: center; }
.d-tarif { text-align: center; font-size: 16px; color: var(--amber); text-wrap: balance; }
.dua-m h2.lbl { font: 600 13px var(--body); margin: 0 0 4px; }
.dua-m > .r-ar { margin-block: 6px; }
.diger h2.lbl { margin: 0; }
.kopru { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 20px; background: var(--sun); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.3; box-shadow: 0 5px 0 #000; transition: transform .12s, box-shadow .12s; }
.kopru:active { transform: translateY(3px); box-shadow: 0 2px 0 #000; }
.kopru img { flex: none; width: 76px; transition: transform .5s var(--spring); }
.kopru b { display: block; font: 700 19px/1.15 var(--disp); margin-bottom: 3px; }
.diger { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.d-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.mini { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; color: var(--ink); text-decoration: none; font-size: 16px; animation: none; }
.d-not { margin-top: 8px; font-size: 14px; color: #FFF4E4BB; }
.dua-sayfa :focus-visible { outline-color: var(--sun); }

.d-kartlar { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.d-kartlar .an { position: static; min-height: 132px; background: var(--cream); padding-block: 8px; animation: wordin .6s calc(var(--i) * 60ms) var(--spring) backwards; }
.d-kartlar .an h2 { margin: 0; font: 700 clamp(26px, 7vw, 34px)/1.05 var(--disp); }
.d-kartlar .an img { width: 104px; }
.d-orta { justify-content: center; }

/* Prayer time, imsakiye and religious day pages: the answer in one card, then the table. */
.v-kart { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 3px solid var(--ink); border-radius: 22px; background: var(--cream); color: var(--ink); box-shadow: 0 6px 0 #000; }
.v-gun { font: 600 16px var(--body); text-align: center; }
.v-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-variant-numeric: tabular-nums; }
.v-g p { padding: 8px 4px; border-radius: 14px; background: #FFE7C7; text-align: center; transition: background .3s, transform .35s var(--spring); }
.v-g small { display: block; font: 600 13px var(--body); }
.v-g b { font: 700 clamp(22px, 6.2vw, 28px)/1.15 var(--disp); }
.v-g p.sirada { background: var(--sun); transform: scale(1.05) rotate(-1deg); }
.v-sonraki { font: 600 15px var(--body); text-align: center; }
.v-cevap { font: 700 clamp(25px, 7vw, 32px)/1.15 var(--disp); text-align: center; text-wrap: balance; }
.v-kalan { min-height: 1.4em; font: 600 15px var(--body); text-align: center; }
.dua-m > .v-kalan { color: var(--sun); }
.vt .v-kalan { text-align: end; white-space: nowrap; }
.v-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.v-ikinci { background: var(--cream); }
.v-aylar details { border-top: 2px solid #FFF4E433; }
.v-aylar summary { font-size: 19px; }
.vt-sar { overflow-x: auto; }
.vt { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vt th, .vt td { padding: 7px 3px; text-align: center; border-bottom: 1px solid #FFF4E41F; }
.vt thead th { color: var(--amber); font-weight: 600; font-size: 12.5px; }
.vt tbody th { font-weight: 600; }
.vt-genis { font-size: 15px; }
.vt-genis th, .vt-genis td { padding: 9px 6px; text-align: start; }
.vt tr.bugun > * { background: var(--sun); color: var(--ink); }
.vt tr.bugun > :first-child { border-radius: 8px 0 0 8px; }
.vt tr.bugun > :last-child { border-radius: 0 8px 8px 0; }
.vt tr.v-kadir > * { color: var(--sun); font-weight: 600; }

/* Legal pages: plain and readable, nothing moves. */
.belge-sayfa { background: var(--cream); }
.belge { max-width: 680px; margin-inline: auto; padding: calc(78px + env(safe-area-inset-top, 0px)) var(--gutter-r) 48px var(--gutter-l); display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.55; }
.belge h1 { max-width: none; margin: 0; font: 700 clamp(34px, 9vw, 52px)/1.06 var(--disp); color: var(--ink); text-shadow: none; text-wrap: balance; }
.belge .tarih { font-size: 14px; color: #6B5557; }
.belge h2 { margin-top: 18px; font: 600 clamp(22px, 5.8vw, 27px)/1.15 var(--disp); text-wrap: balance; }
.belge ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.kisaca { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 3px solid var(--ink); border-radius: 20px; background: var(--sun); box-shadow: 0 5px 0 var(--ink); }
.belge .kisaca h2 { margin-top: 0; }
.tablo { overflow-x: auto; border: 2px solid #2A1A1C33; border-radius: 14px; }
.tablo table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.tablo th, .tablo td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #2A1A1C22; }
.tablo th { background: #FFE7C7; font-weight: 700; }
.tablo tr:last-child td { border-bottom: 0; }
/* On a phone each row becomes a small card, so nothing hides behind a sideways scroll. */
@media (max-width: 640px) {
  .tablo { overflow: visible; }
  .tablo table { display: block; min-width: 0; }
  .tablo thead { display: none; }
  .tablo tbody, .tablo tr, .tablo td { display: block; }
  .tablo tr { padding: 12px 14px; border-bottom: 2px solid #2A1A1C22; }
  .tablo tr:last-child { border-bottom: 0; }
  .tablo td { padding: 4px 0; border: 0; }
  .tablo td::before { content: attr(data-l); display: block; font-weight: 700; font-size: 13px; color: #6B5557; }
}
mark { padding: 0 4px; border-radius: 4px; background: #FFC98A; color: var(--ink); }
.d-alt { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 15px; }
.d-alt a { min-height: 32px; }
.d-alt [aria-current] { font-weight: 700; text-decoration: none; }

/* Sections */
.sec { position: relative; padding: 72px var(--gutter-r) 72px var(--gutter-l); }
.night { background: var(--night); color: var(--cream); }
.cream { background: var(--cream); }
.wine { background: var(--wine); color: var(--cream); }
.wrap { max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
.narrow { max-width: 620px; }
.sec h2 { font: 700 clamp(40px, 10.6vw, 72px)/1.02 var(--disp); letter-spacing: -.01em; text-wrap: balance; }
.js .rv { opacity: 0; transform: translateY(46px) rotate(var(--rot, 0deg)) scale(.94); transition: opacity .5s ease, transform .8s var(--spring); }
.js .rv.in { opacity: 1; transform: rotate(var(--rot, 0deg)); }

/* Moments: each card pins as you scroll and the next one slides over it. */
.anlar { background: var(--mandalina); }
.anlar h2 { color: var(--cream); text-shadow: 3px 4px 0 var(--ink); }
.stack { display: flex; flex-direction: column; gap: 22px; }
.an { position: sticky; top: calc(72px + var(--i) * 14px); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 196px; padding: 18px 12px 18px 22px; border: 3px solid var(--ink); border-radius: 26px; background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: 0 7px 0 var(--ink); transition: transform .15s; }
.an:active { transform: translateY(4px); }
.an h3 { font: 700 clamp(29px, 8vw, 40px)/1.05 var(--disp); text-wrap: balance; }
.an small { display: block; margin-top: 8px; font: 600 15px var(--body); transition: translate .3s var(--spring); }
.an img { flex: none; width: clamp(112px, 31vw, 150px); transition: transform .5s var(--spring); }

/* The scattered searches fly into one card. */
.pile { position: relative; height: 300px; }
.s { position: absolute; padding: 8px 13px; border: 2px solid #2A1A1C33; border-radius: 999px; background: #fff; font: 500 15px var(--body); white-space: nowrap; box-shadow: 0 3px 10px #2A1A1C1F; transition: transform .7s calc(1.1s + var(--o) * 70ms) cubic-bezier(.6, -.3, .4, 1), opacity .3s calc(1.6s + var(--o) * 70ms); }
.s1 { --o: 0; left: 0; top: 4%; } .s2 { --o: 1; right: 0; top: 18%; } .s3 { --o: 2; left: 3%; top: 36%; }
.s4 { --o: 3; right: 2%; top: 52%; } .s5 { --o: 4; left: 8%; top: 68%; } .s6 { --o: 5; right: 6%; top: 84%; }
.pile.in .s { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(.3); }
.s1 { --tx: 90px; --ty: 110px; } .s2 { --tx: -80px; --ty: 70px; } .s3 { --tx: 80px; --ty: 30px; }
.s4 { --tx: -70px; --ty: -20px; } .s5 { --tx: 70px; --ty: -70px; } .s6 { --tx: -60px; --ty: -110px; }
.one { position: absolute; inset: 40px 0; display: flex; align-items: center; gap: 12px; padding: 16px; border: 3px solid var(--ink); border-radius: 24px; background: var(--sun); box-shadow: 6px 7px 0 var(--ink); opacity: 0; transform: scale(.4) rotate(-6deg); transition: opacity .3s 2s, transform .7s 2s var(--spring); }
.pile.in .one { opacity: 1; transform: rotate(-1deg); }
.one img { flex: none; width: 104px; }
.one-t { font: 700 clamp(25px, 6.8vw, 34px)/1.1 var(--disp); }

.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px 26px; }
.way { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 0; overflow: hidden; border-radius: 26px; background: var(--bg); color: var(--ink); box-shadow: 7px 8px 0 var(--edge); }
.way-t { display: flex; flex-direction: column; gap: 4px; }
.way h3 { font: 700 clamp(28px, 7.6vw, 36px)/1.05 var(--disp); }
.way-v { position: relative; height: 310px; margin-top: auto; }
.ph { position: absolute; left: 50%; top: 8px; width: 186px; height: 380px; margin-left: -108px; padding: 16px 12px; border: 3.5px solid var(--ink); border-bottom: 0; border-radius: 30px 30px 0 0; box-shadow: 6px 0 0 var(--ink); display: flex; flex-direction: column; gap: 10px; transform: translateY(70px) rotate(-3deg); transition: transform .9s .15s var(--spring); }
.in .ph { transform: rotate(-3deg); }
.lock { background: linear-gradient(180deg, #2C2F6B, var(--night)); color: var(--cream); align-items: center; text-align: center; }
.clock { font: 300 34px/1 var(--serif); }
.home { background: linear-gradient(180deg, #FFB98C, #FC8A4F); }
.gate { background: var(--night); }
.verse { display: block; padding: 12px 11px; border-radius: 14px; }
.js .verse { opacity: 0; transform: scale(.8); transition: opacity .4s var(--gel, .6s), transform .6s var(--gel, .6s) var(--spring); }
.js .in .verse { opacity: 1; transform: none; }
.verse i { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: .55; transform-origin: 0 50%; }
.verse i + i { margin-top: 7px; }
.verse i:nth-child(2) { width: 82%; --n: 1; }
.verse i:nth-child(3) { width: 38%; opacity: .3; --n: 2; }
/* The lines write themselves once the card lands. */
.js .verse i { transform: scaleX(0); transition: transform .45s calc(var(--gel, .6s) + .3s + var(--n, 0) * 180ms) ease-out; }
.js .in .verse i { transform: none; }
.gate { --gel: 1.5s; }
.lock .verse { background: #FFF4E41F; align-self: stretch; }
.home .verse, .gate .verse { background: var(--cream); color: var(--night); border: 2px solid var(--ink); }
.gate .verse { position: absolute; left: 10px; right: 10px; top: 54px; box-shadow: 3px 4px 0 var(--ink); }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.apps i { aspect-ratio: 1; border-radius: 9px; background: #FFF4E4AA; border: 2px solid #2A1A1C33; }
.apps i:nth-child(2) { --n: 1; } .apps i:nth-child(3) { --n: 2; } .apps i:nth-child(4) { --n: 3; } .apps i:nth-child(5) { --n: 4; } .apps i:nth-child(6) { --n: 5; } .apps i:nth-child(7) { --n: 6; } .apps i:nth-child(8) { --n: 7; }
.js .apps i { transform: scale(0); transition: transform .4s calc(.45s + var(--n, 0) * 45ms) var(--spring); }
.js .in .apps i { transform: none; }
/* The apps are sharp first, then step back when the pause arrives. */
.dim { filter: blur(2.5px); opacity: .55; }
.js .dim { filter: none; opacity: 1; transition: filter .6s 1.3s, opacity .6s 1.3s; }
.js .in .dim { filter: blur(2.5px); opacity: .55; }
.peek { position: absolute; right: -4px; bottom: -4px; width: 128px; transform: translateX(60px) rotate(12deg); transition: transform .8s .35s var(--spring); }
.in .peek { transform: none; }

.band { overflow: hidden; background: var(--sun); border-block: 3px solid var(--ink); padding-block: 12px; }
.track { display: flex; width: max-content; animation: slide 26s linear infinite; }
.track span { flex: none; padding-right: 34px; font: 700 clamp(28px, 7.6vw, 48px)/1.2 var(--disp); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }
.parade { overflow: hidden; padding-block: 22px 8px; background: var(--mandalina); }
.ptrack { display: flex; width: max-content; gap: 12px; animation: slide 30s linear infinite; }
.ptrack img { flex: none; width: clamp(92px, 25vw, 136px); animation: walk 1.1s ease-in-out infinite; }
.ptrack img:nth-child(even) { animation-delay: -.55s; }
@keyframes walk { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-variant-numeric: tabular-nums; }
.plan { display: flex; flex-direction: column; align-items: flex-start; min-height: 94px; padding: 11px; border: 3px solid var(--ink); border-radius: 18px; background: var(--cream); color: var(--ink); text-align: left; box-shadow: 0 5px 0 var(--ink); font-weight: 600; font-size: 14px; line-height: 1.25; transition: transform .2s var(--spring), background .2s; }
.plan b { font: 700 clamp(18px, 5.3vw, 25px)/1.2 var(--disp); white-space: nowrap; }
.plan small { font-weight: 400; font-size: 13px; }
.plan.on { background: var(--sun); transform: translateY(-3px) rotate(-1deg); }
.plan:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); transition-duration: .08s; }
#term { display: inline-block; }
#term.swap { animation: sayswap .45s var(--spring); }

.faq { gap: 4px; }
.faq h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 14px; }
details { border-top: 2px solid #2A1A1C33; padding-block: 12px; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; font: 600 21px var(--disp); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 28px; line-height: 1; transition: rotate .35s var(--spring); }
details[open] summary::after { rotate: 45deg; }
details p { padding-top: 6px; }
details[open] p { animation: acil .35s ease-out; }
@keyframes acil { from { opacity: 0; transform: translateY(-6px); } }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

.foot { padding-block: 40px 96px; font-size: 16px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.cols nav { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ft { font: 600 18px var(--disp); }
.cols a { padding-block: 3px; text-decoration: none; }
.cols a.ft { padding-block: 0; }

/* Only with a real pointer, so a tap on a phone never leaves a card stuck in its lifted state. */
@media (hover: hover) {
  .logo:hover { transform: rotate(-2deg) scale(1.04); }
  .pill:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
  .pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
  .chip:not(.hint):hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
  .chip:hover:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
  .plan:not(.on):hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
  .plan:hover:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
  .an:hover { transform: translateY(-3px); }
  .an:active { transform: translateY(4px); }
  .an:hover img { transform: rotate(-6deg) scale(1.06); }
  .an:hover small { translate: 5px 0; }
  .kopru:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #000; }
  .kopru:active { transform: translateY(3px); box-shadow: 0 2px 0 #000; }
  .kopru:hover img { transform: rotate(-8deg) scale(1.08); }
  .back:hover { color: var(--sun); }
  summary:hover::after { color: var(--mandalina); }
  .cols a:hover, .d-alt a:hover { color: var(--sun); }
  .belge-sayfa .d-alt a:hover { color: var(--mandalina); }
  .m1 img:hover, .m3 img:hover { animation-play-state: paused; }
  .band:hover .track, .parade:hover .ptrack, .parade:hover .ptrack img { animation-play-state: paused; }
}

@media (min-width: 900px) {
  .head { padding-top: 84px; }
  .sec { padding-block: 110px; }
  .foot { padding-block: 40px; }
  .chips { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 860px; }
  .m2 { width: auto; height: 100%; max-width: none; }
  .pile { height: 340px; }
}
/* Tall phones: the spare height goes to the mascots, not to empty orange. */
@media (max-width: 899px) and (min-height: 740px) {
  h1 { font-size: clamp(38px, 11.4vw, 84px); }
  .gang { height: 30vh; }
  .m2 { width: 56%; }
  .m1, .m3 { width: 36%; }
}
/* Short screens, such as a phone browser with its bars showing or an in-app viewer. */
@media (max-height: 700px) { h1 { font-size: clamp(32px, 8.8vw, 54px); } .head { padding-top: calc(60px + env(safe-area-inset-top, 0px)); } .chip { min-height: 44px; } .q { font-size: 18px; } }
@media (max-height: 560px) { .say { display: none; } }
@media (max-width: 350px) { .logo { font-size: 18px; padding-right: 9px; } .nav .pill { padding-inline: 10px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w, .hl, .q, .chip, .mate, .mate img, .mate img.hop, .m2.hop, .d-m, .say, .say.swap, #term.swap, .reader, .r-m, .lift, .track, .ptrack, .ptrack img, .d-kartlar .an, details[open] p { animation: none; }
  .nav, .logo, .js .rv, .ph, .peek, .js .verse, .js .verse i, .js .apps i, .js .dim, .s, .one, .pose, summary::after, .an small, .an img, .kopru img, .v-g p { transition: none; }
  details::details-content { transition: none; }
}