/* ============================================================ KANKAM — shared foundation (reset · tokens · motion · a11y) Loaded first; each demo overrides color/type tokens after. Motion principles: Emil Kowalski easing + impeccable bans. Reveals ENHANCE an already-visible default (no JS = visible). ============================================================ */ /* ---- Reset ------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:hidden} img,picture,video,svg{display:block;max-width:100%;height:auto} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} ul[role="list"]{list-style:none} :focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px} /* ---- Shared tokens (demos override the color/type block) --- */ :root{ /* Emil's strong custom easing curves */ --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1); --ease-quart:cubic-bezier(0.25,1,0.5,1); /* z-index scale (semantic, never 9999) */ --z-base:1;--z-sticky:100;--z-nav:200;--z-overlay:900;--z-modal:1000;--z-toast:1100; /* radii — impeccable: cards top out ~16px */ --r-sm:6px;--r-md:12px;--r-lg:16px;--r-pill:999px; --container:1240px; } /* ---- Motion utilities ------------------------------------- */ /* Hidden state only applies when JS is on AND motion allowed. Without JS (or reduced-motion) content is fully visible. Token-driven reveal: the hidden transform is composed from CSS custom properties, so a per-site "motion signature" (a .mo-* class on ) can retune distance, easing, duration, blur, skew and rotation WITHOUT touching any element markup. Named directional variants below just set the relevant token. */ .has-js [data-reveal]{ opacity:0;will-change:opacity,transform,filter; transform:translate(var(--rv-x,0), var(--rv-y,26px)) scale(var(--rv-s,1)) rotate(var(--rv-r,0deg)) skewY(var(--rv-sk,0deg)); filter:var(--rv-f,none); transition:opacity var(--rv-dur,.7s) var(--rv-ease,var(--ease-out)), transform var(--rv-durt,.8s) var(--rv-ease,var(--ease-out)), filter var(--rv-dur,.7s) var(--rv-ease,var(--ease-out)), clip-path .9s var(--ease-quart); } /* directional variants override only the tokens they need */ .has-js [data-reveal="down"] {--rv-y:-26px} .has-js [data-reveal="left"] {--rv-x:34px;--rv-y:0} .has-js [data-reveal="right"] {--rv-x:-34px;--rv-y:0} .has-js [data-reveal="zoom"] {--rv-s:.94;--rv-y:0} /* new expressive variants (opt-in per element) */ .has-js [data-reveal="blur"] {--rv-y:16px;--rv-f:blur(14px)} .has-js [data-reveal="skew"] {--rv-y:32px;--rv-sk:5deg} .has-js [data-reveal="rise-rot"]{--rv-y:36px;--rv-r:-4deg} .has-js [data-reveal="pop"] {--rv-s:.86;--rv-y:0} .has-js [data-reveal="clip"] {opacity:1;clip-path:inset(0 0 100% 0)} .has-js [data-reveal="clip-x"] {opacity:1;clip-path:inset(0 100% 0 0)} .has-js [data-reveal="clip-r"] {opacity:1;clip-path:inset(0 0 0 100%)} .has-js [data-reveal].in{ opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0) } /* staggered children (also token-aware) */ .has-js [data-stagger]>*{opacity:0; transform:translateY(var(--sg-y,22px)) scale(var(--sg-s,1)); transition:opacity var(--sg-dur,.6s) var(--rv-ease,var(--ease-out)), transform var(--sg-durt,.7s) var(--rv-ease,var(--ease-out))} .has-js [data-stagger].in>*{opacity:1;transform:none} /* ---- Motion signatures — one distinct personality per site --- Set a class on ; every reveal on the page inherits its easing / rhythm / hidden-offset. Explicit directional variants above still win (they set tokens directly on the element). */ .mo-restoran{--rv-ease:var(--ease-quart);--rv-dur:.95s;--rv-durt:1.05s;--rv-y:30px;--sg-durt:.9s} .mo-kuafor {--rv-ease:cubic-bezier(.2,.8,.2,1);--rv-dur:.9s;--rv-durt:1s;--rv-y:24px;--rv-s:.98;--sg-y:26px} .mo-hukuk {--rv-ease:var(--ease-in-out);--rv-dur:.55s;--rv-durt:.6s;--rv-y:16px;--sg-y:14px;--sg-durt:.5s} .mo-dis {--rv-ease:var(--ease-out);--rv-dur:.7s;--rv-durt:.75s;--rv-y:18px;--rv-f:blur(6px)} .mo-emlak {--rv-ease:cubic-bezier(.25,.8,.25,1);--rv-dur:.75s;--rv-durt:.85s;--rv-x:38px;--rv-y:0;--sg-y:20px} .mo-fitness {--rv-ease:cubic-bezier(.16,1,.3,1);--rv-dur:.45s;--rv-durt:.5s;--rv-y:46px;--rv-sk:4deg;--sg-y:34px;--sg-durt:.45s} .mo-oto {--rv-ease:cubic-bezier(.16,1,.3,1);--rv-dur:.55s;--rv-durt:.65s;--rv-s:.92;--rv-y:0;--sg-s:.94;--sg-y:0} .mo-eticaret{--rv-ease:var(--ease-out);--rv-dur:.7s;--rv-durt:.8s;--rv-y:28px;--sg-y:24px} .mo-insaat {--rv-ease:cubic-bezier(.83,0,.17,1);--rv-dur:.6s;--rv-durt:.7s;--rv-y:0;--rv-r:0deg;--sg-y:0;--sg-durt:.55s} .mo-dugun {--rv-ease:var(--ease-quart);--rv-dur:1.1s;--rv-durt:1.25s;--rv-y:22px;--rv-s:.97;--sg-y:18px;--sg-durt:1s} @media (prefers-reduced-motion:reduce){ .mo-restoran,.mo-kuafor,.mo-hukuk,.mo-dis,.mo-emlak, .mo-fitness,.mo-oto,.mo-eticaret,.mo-insaat,.mo-dugun{--rv-f:none;--rv-sk:0deg;--rv-r:0deg} } @media (prefers-reduced-motion:reduce){ .has-js [data-reveal], .has-js [data-stagger]>*{ opacity:1!important;transform:none!important;clip-path:none!important; transition:opacity .3s ease!important } } /* ---- Buttons (responsive press feedback) ------------------ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-weight:600;letter-spacing:-0.01em;line-height:1;cursor:pointer; padding:.95em 1.6em;border-radius:var(--r-pill);position:relative; transition:transform .16s var(--ease-out),background-color .2s ease, color .2s ease,box-shadow .2s ease} .btn:active{transform:scale(0.97)} @media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-1px)} .btn:active{transform:scale(0.97)} } .btn--lg{padding:1.1em 2em;font-size:1.05rem} /* magnetic wrapper keeps transform smooth */ .magnetic{transition:transform .35s var(--ease-out)} /* ---- Accordion ------------------------------------------- */ .acc__item{border-bottom:1px solid var(--hair,rgba(0,0,0,.1))} .acc__head{display:flex;align-items:center;justify-content:space-between;gap:1rem; width:100%;text-align:left;padding:1.25rem 0;font-weight:600;font-size:1.05rem} .acc__icon{flex:none;width:1.4rem;height:1.4rem;position:relative; transition:transform .3s var(--ease-out)} .acc__icon::before,.acc__icon::after{content:"";position:absolute;inset:0;margin:auto; background:currentColor} .acc__icon::before{width:100%;height:2px} .acc__icon::after{width:2px;height:100%;transition:transform .3s var(--ease-out)} .acc__item.open .acc__icon{transform:rotate(90deg)} .acc__item.open .acc__icon::after{transform:scaleY(0)} .acc__panel{overflow:hidden;height:0;transition:height .38s var(--ease-drawer)} .acc__inner{padding:0 0 1.4rem} @media (prefers-reduced-motion:reduce){.acc__panel{transition:none}} /* ---- Navbar shrink --------------------------------------- */ [data-navbar]{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); transition:background-color .3s ease,box-shadow .3s ease, padding .3s var(--ease-out),backdrop-filter .3s ease} [data-navbar].scrolled{backdrop-filter:saturate(140%) blur(12px)} /* ---- Horizontal scroll gallery --------------------------- */ [data-hscroll]{position:relative} .hscroll__track{display:flex;gap:1.5rem;will-change:transform} .hscroll--pinned .hscroll__sticky{position:sticky;top:0} .hscroll__bar{position:absolute;left:0;right:0;bottom:0;height:3px; background:rgba(255,255,255,.12);z-index:5;opacity:0;transition:opacity .3s} .hscroll--pinned .hscroll__bar{opacity:1} .hscroll__bar-fill{height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0); background:var(--accent,#e0b34d);will-change:transform} /* ---- Counters / helpers ---------------------------------- */ [data-counter]{font-variant-numeric:tabular-nums} .container{width:100%;max-width:var(--container);margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .marquee{overflow:hidden;white-space:nowrap} .marquee__inner{display:inline-flex;will-change:transform; animation:marquee var(--marquee-dur,28s) linear infinite} @keyframes marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee__inner{animation:none}} /* ---- Language switcher (shared, theme-agnostic) ----------- */ .langsw{display:inline-flex;gap:.15rem;padding:.2rem;border-radius:var(--r-pill); border:1px solid var(--hair,rgba(128,128,128,.28)); background:var(--langsw-bg,rgba(128,128,128,.08));backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)} .langsw__btn{font-size:.72rem;font-weight:600;letter-spacing:.04em;line-height:1; padding:.42em .66em;border-radius:var(--r-pill);color:inherit;opacity:.6; transition:opacity .2s ease,background-color .2s ease,color .2s ease} .langsw__btn:hover{opacity:1} .langsw__btn.active{opacity:1;background:var(--accent,var(--gold,currentColor)); color:var(--langsw-active-ink,#0d0e10)} @media (hover:hover) and (pointer:fine){.langsw__btn{cursor:pointer}}