/*! ------------------------------------------------ * Project Name: Rayo - Digital Agency & Personal Portfolio HTML Template * Project Description: Elevate your digital presence with Rayo - dynamic and stylish HTML template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact. * Tags: mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean, agency, studio  * Version: 1.0.0 * Build Date: July 2025 * Last Update: July 2025 * This product is available exclusively on Themeforest * Author: mix_design * Author URI: https://themeforest.net/user/mix_design *//*! File name: loader.css * ------------------------------------------------ * * ------------------------------------------------ * Table of Contents * ------------------------------------------------ *  01. Loader Styles * ------------------------------------------------ * Table of Contents End * ------------------------------------------------ */:root {
  --_size:1.8rem;
  --_font-default:"Funnel Sans",sans-serif;
  --_font-accent:"Funnel Display",sans-serif;
  --_radius-s:1rem;
  --_radius-m:1.6rem;
  --_radius-pt-m:1.6rem;
  --_radius-l:3.8rem;
  --_radius-xl:6rem;
  --_animspeed-fast:0.1s;
  --_animspeed-medium:0.3s;
  --_animspeed-slow:0.6s;
  --_animbezier:cubic-bezier(0.23, 0.65, 0.74, 1.09);
  --base--light:#FAF7F6;
  --base-rgb--light:250,247,246;
  --base-tint--light:#FFFFFF;
  --base-shade--light:#e0dddb;
  --base-opp--light:#161616;
  --base-opp-tint--light:#1C1C1C;
  --accent--light:#9F8BE7;
  --accent-rgb--light:159,139,231;
  --additional--light:#DDF160;
  --additional-rgb--light:221,241,96;
  --neutral-transparent--light:rgba(255, 255, 255, 0.3);
  --st-bright--light:#161616;
  --st-medium--light:#7C7C7C;
  --st-muted--light:#E0DDDB;
  --st-opp-bright--light:#FFFFFF;
  --fw-regular--light:400;
  --fw-medium--light:600;
  --fw-semibold--light:700;
  --fw-bold--light:800;
  --fw-regular-opp--light:300;
  --fw-medium-opp--light:500;
  --t-bright--light:#161616;
  --t-medium--light:#303030;
  --t-muted--light:#585858;
  --t-muted-extra--light:#B2AEAD;
  --t-opp-bright--light:#FFFFFF;
  --t-opp-medium--light:#ACACAC;
  --t-opp-muted--light:#838383;
  --bg-demo-screen-01--light:url(../img/demo/screens/01.webp);
  --bg-demo-screen-02--light:url(../img/demo/screens/02.webp);
  --bg-demo-screen-03--light:url(../img/demo/screens/03.webp);
  --bg-demo-screen-04--light:url(../img/demo/screens/04.webp);
  --bg-demo-screen-05--light:url(../img/demo/screens/05.webp);
  --bg-demo-screen-06--light:url(../img/demo/screens/06.webp);
  --bg-demo-screen-07--light:url(../img/demo/screens/07.webp);
  --bg-demo-screen-08--light:url(../img/demo/screens/08.webp);
  --bg-demo-screen-09--light:url(../img/demo/screens/09.webp);
  --base--dark:#161616;
  --base-rgb--dark:22,22,22;
  --base-tint--dark:#1C1C1C;
  --base-shade--dark:#0a0a0a;
  --base-opp--dark:#FAF7F6;
  --base-opp-tint--dark:#ffffff;
  --accent--dark:#DDF160;
  --accent-rgb--dark:221,241,96;
  --additional--dark:#9F8BE7;
  --additional-rgb--dark:159,139,231;
  --neutral-transparent--dark:rgba(0, 0, 0, 0.3);
  --st-bright--dark:#FFFFFF;
  --st-medium--dark:#646464;
  --st-muted--dark:#252525;
  --st-opp-bright--dark:#0f0f0f;
  --fw-regular--dark:300;
  --fw-medium--dark:500;
  --fw-semibold--dark:600;
  --fw-bold--dark:700;
  --fw-regular-opp--dark:400;
  --fw-medium-opp--dark:600;
  --t-bright--dark:#FFFFFF;
  --t-medium--dark:#ACACAC;
  --t-muted--dark:#838383;
  --t-muted-extra--dark:#535151;
  --t-opp-bright--dark:#161616;
  --t-opp-medium--dark:#303030;
  --t-opp-muted--dark:#969696;
  --bg-demo-screen-01--dark:url(../img/demo/screens/01-d.webp);
  --bg-demo-screen-02--dark:url(../img/demo/screens/02-d.webp);
  --bg-demo-screen-03--dark:url(../img/demo/screens/03-d.webp);
  --bg-demo-screen-04--dark:url(../img/demo/screens/04-d.webp);
  --bg-demo-screen-05--dark:url(../img/demo/screens/05-d.webp);
  --bg-demo-screen-06--dark:url(../img/demo/screens/06-d.webp);
  --bg-demo-screen-07--dark:url(../img/demo/screens/07-d.webp);
  --bg-demo-screen-08--dark:url(../img/demo/screens/08-d.webp);
  --bg-demo-screen-09--dark:url(../img/demo/screens/09-d.webp);
  --pt-base:#FFFFFF;
  --pt-base-dark:#161616;
  --pt-t-light-bright:#FFFFFF;
  --pt-t-dark-bright:#161616;
  --pt-st-light-bright:#FFFFFF;
  --pt-st-dark-bright:#161616;
  --pt-purple-rgb:159,139,231;
  --pt-purple-dark-rgb:33,10,113;
  --nl-white:#ffffff;
  --nl-black:#000000;
}

@media only screen and (min-width:768px) {
  :root {
    --_radius-m:2.6rem;
    --_radius-l:5rem;
    --_radius-xl:8rem;
  }
}

@media only screen and (min-width:1200px) {
  :root {
    --_radius-xl:8rem;
  }
}

@media (prefers-color-scheme:light) {
  :root {
    --base:var(--base--light);
    --base-rgb:var(--base-rgb--light);
    --base-tint:var(--base-tint--light);
    --base-shade:var(--base-shade--light);
    --base-opp:var(--base-opp--light);
    --base-opp-tint:var(--base-opp-tint--light);
    --accent:var(--accent--light);
    --accent-rgb:var(--accent-rgb--light);
    --additional:var(--additional--light);
    --additional-rgb:var(--additional-rgb--light);
    --neutral-transparent:var(--neutral-transparent--light);
    --st-bright:var(--st-bright--light);
    --st-medium:var(--st-medium--light);
    --st-muted:var(--st-muted--light);
    --st-opp-bright:var(--st-opp-bright--light);
    --fw-regular:var(--fw-regular--light);
    --fw-medium:var(--fw-medium--light);
    --fw-semibold:var(--fw-semibold--light);
    --fw-bold:var(--fw-bold--light);
    --fw-regular-opp:var(--fw-regular-opp--light);
    --fw-medium-opp:var(--fw-medium-opp--light);
    --t-bright:var(--t-bright--light);
    --t-medium:var(--t-medium--light);
    --t-muted:var(--t-muted--light);
    --t-muted-extra:var(--t-muted-extra--light);
    --t-opp-bright:var(--t-opp-bright--light);
    --t-opp-medium:var(--t-opp-medium--light);
    --t-opp-muted:var(--t-opp-muted--light);
    --bg-demo-screen-01:var(--bg-demo-screen-01--light);
    --bg-demo-screen-02:var(--bg-demo-screen-02--light);
    --bg-demo-screen-03:var(--bg-demo-screen-03--light);
    --bg-demo-screen-04:var(--bg-demo-screen-04--light);
    --bg-demo-screen-05:var(--bg-demo-screen-05--light);
    --bg-demo-screen-06:var(--bg-demo-screen-06--light);
    --bg-demo-screen-07:var(--bg-demo-screen-07--light);
    --bg-demo-screen-08:var(--bg-demo-screen-08--light);
    --bg-demo-screen-09:var(--bg-demo-screen-09--light);
  }
}

@media (prefers-color-scheme:dark) {
  :root {
    --base:var(--base--dark);
    --base-rgb:var(--base-rgb--dark);
    --base-tint:var(--base-tint--dark);
    --base-shade:var(--base-shade--dark);
    --base-opp:var(--base-opp--dark);
    --base-opp-tint:var(--base-opp-tint--dark);
    --accent:var(--accent--dark);
    --accent-rgb:var(--accent-rgb--dark);
    --additional:var(--additional--dark);
    --additional-rgb:var(--additional-rgb--dark);
    --neutral-transparent:var(--neutral-transparent--dark);
    --st-bright:var(--st-bright--dark);
    --st-medium:var(--st-medium--dark);
    --fw-semibold:var(--fw-semibold--dark);
    --st-muted:var(--st-muted--dark);
    --st-opp-bright:var(--st-opp-bright--dark);
    --fw-regular:var(--fw-regular--dark);
    --fw-medium:var(--fw-medium--dark);
    --fw-bold:var(--fw-bold--dark);
    --fw-regular-opp:var(--fw-regular-opp--dark);
    --fw-medium-opp:var(--fw-medium-opp--dark);
    --t-bright:var(--t-bright--dark);
    --t-medium:var(--t-medium--dark);
    --t-muted:var(--t-muted--dark);
    --t-muted-extra:var(--t-muted-extra--dark);
    --t-opp-bright:var(--t-opp-bright--dark);
    --t-opp-medium:var(--t-opp-medium--dark);
    --t-opp-muted:var(--t-opp-muted--dark);
    --bg-demo-screen-01:var(--bg-demo-screen-01--dark);
    --bg-demo-screen-02:var(--bg-demo-screen-02--dark);
    --bg-demo-screen-03:var(--bg-demo-screen-03--dark);
    --bg-demo-screen-04:var(--bg-demo-screen-04--dark);
    --bg-demo-screen-05:var(--bg-demo-screen-05--dark);
    --bg-demo-screen-06:var(--bg-demo-screen-06--dark);
    --bg-demo-screen-07:var(--bg-demo-screen-07--dark);
    --bg-demo-screen-08:var(--bg-demo-screen-08--dark);
    --bg-demo-screen-09:var(--bg-demo-screen-09--dark);
  }
}

[color-scheme=light] {
  --base:var(--base--light);
  --base-rgb:var(--base-rgb--light);
  --base-tint:var(--base-tint--light);
  --base-shade:var(--base-shade--light);
  --base-opp:var(--base-opp--light);
  --base-opp-tint:var(--base-opp-tint--light);
  --accent:var(--accent--light);
  --accent-rgb:var(--accent-rgb--light);
  --additional:var(--additional--light);
  --additional-rgb:var(--additional-rgb--light);
  --neutral-transparent:var(--neutral-transparent--light);
  --st-bright:var(--st-bright--light);
  --st-medium:var(--st-medium--light);
  --st-muted:var(--st-muted--light);
  --st-opp-bright:var(--st-opp-bright--light);
  --fw-regular:var(--fw-regular--light);
  --fw-medium:var(--fw-medium--light);
  --fw-semibold:var(--fw-semibold--light);
  --fw-bold:var(--fw-bold--light);
  --fw-regular-opp:var(--fw-regular-opp--light);
  --fw-medium-opp:var(--fw-medium-opp--light);
  --t-bright:var(--t-bright--light);
  --t-medium:var(--t-medium--light);
  --t-muted:var(--t-muted--light);
  --t-muted-extra:var(--t-muted-extra--light);
  --t-opp-bright:var(--t-opp-bright--light);
  --t-opp-medium:var(--t-opp-medium--light);
  --t-opp-muted:var(--t-opp-muted--light);
  --bg-demo-screen-01:var(--bg-demo-screen-01--light);
  --bg-demo-screen-02:var(--bg-demo-screen-02--light);
  --bg-demo-screen-03:var(--bg-demo-screen-03--light);
  --bg-demo-screen-04:var(--bg-demo-screen-04--light);
  --bg-demo-screen-05:var(--bg-demo-screen-05--light);
  --bg-demo-screen-06:var(--bg-demo-screen-06--light);
  --bg-demo-screen-07:var(--bg-demo-screen-07--light);
  --bg-demo-screen-08:var(--bg-demo-screen-08--light);
  --bg-demo-screen-09:var(--bg-demo-screen-09--light);
}

[color-scheme=dark] {
  --base:var(--base--dark);
  --base-rgb:var(--base-rgb--dark);
  --base-tint:var(--base-tint--dark);
  --base-shade:var(--base-shade--dark);
  --base-opp:var(--base-opp--dark);
  --base-opp-tint:var(--base-opp-tint--dark);
  --accent:var(--accent--dark);
  --accent-rgb:var(--accent-rgb--dark);
  --additional:var(--additional--dark);
  --additional-rgb:var(--additional-rgb--dark);
  --neutral-transparent:var(--neutral-transparent--dark);
  --st-bright:var(--st-bright--dark);
  --st-medium:var(--st-medium--dark);
  --st-muted:var(--st-muted--dark);
  --st-opp-bright:var(--st-opp-bright--dark);
  --fw-regular:var(--fw-regular--dark);
  --fw-medium:var(--fw-medium--dark);
  --fw-semibold:var(--fw-semibold--dark);
  --fw-bold:var(--fw-bold--dark);
  --fw-regular-opp:var(--fw-regular-opp--dark);
  --fw-medium-opp:var(--fw-medium-opp--dark);
  --t-bright:var(--t-bright--dark);
  --t-medium:var(--t-medium--dark);
  --t-muted:var(--t-muted--dark);
  --t-muted-extra:var(--t-muted-extra--dark);
  --t-opp-bright:var(--t-opp-bright--dark);
  --t-opp-medium:var(--t-opp-medium--dark);
  --t-opp-muted:var(--t-opp-muted--dark);
  --bg-demo-screen-01:var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02:var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03:var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04:var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05:var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06:var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07:var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08:var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09:var(--bg-demo-screen-09--dark);
}

.loader {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1000;
}

.loader.loaded {
  opacity:0;
  visibility:hidden;
}

.loader__wrapper {
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background:var(--base);
  color:var(--t-bright);
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -moz-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.loader__content {
  position:absolute;
  left:50%;
  top:50%;
  bottom:auto;
  right:auto;
  -webkit-transform:translateX(-50%) translateY(-50%);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  width:100%;
  z-index:2;
  color:var(--t-bright);
  overflow:hidden;
}

.loader__count {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -moz-box-pack:end;
  -ms-flex-pack:end;
  justify-content:end;
  overflow:hidden;
  line-height:1;
}

.loader__count span {
  display:-webkit-inline-box;
  display:-moz-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  font:normal var(--fw-medium) 6rem/.9 var(--_font-accent);
  letter-spacing:-.06rem;
  color:var(--t-bright);
}

@media only screen and (min-width:768px) {
  .loader__count span {
    font-size:8rem;
  }
}

@media only screen and (min-width:1200px) {
  .loader__count span {
    font-size:10rem;
  }
}

@media only screen and (min-width:1600px) {
  .loader__count span {
    font-size:12rem;
  }
}

/* Yalnızca #loader altını hedefle */
#loader, #loader * { all: unset; box-sizing: border-box; }
#loader { 
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(1000px 700px at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.92));
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* İç düzen */
#loader .loader__wrapper{ display:grid; place-items:center }
#loader .loader__content{ display:grid; place-items:center; gap:16px; text-align:center }

/* Dönen görsel */
#loader .loader__globe{
  width: clamp(80px, 12vw, 140px);
  aspect-ratio: 1/1; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 40px rgba(0, 180, 255, .2);
  position: relative;
}
#loader .loader__globe img{
  width:100%; height:100%; object-fit:contain; 
  animation: loader-spin 1.6s linear infinite;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
#loader .loader__globe::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 65%, rgba(0,180,255,.18) 75%, transparent 85% 100%);
  animation: loader-sweep 2.8s linear infinite;
}

/* Yüzde yazısı */
#loader .loader__count{
  font: 600 clamp(16px,2.4vw,22px)/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#eaf6ff; letter-spacing:.06em; text-shadow:0 2px 12px rgba(0,200,255,.25);
  display:inline-flex; align-items:baseline; gap:4px;
}

/* Sayfa scroll’unu loader açıkken kilitle */
html.loader-active, body.loader-active { overflow:hidden !important; }

/* Animasyonlar */
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-sweep{ to { transform: rotate(360deg); } }

/* Hareket kısıtlaması olan kullanıcılar için */
@media (prefers-reduced-motion: reduce){
  #loader .loader__globe img, #loader .loader__globe::after { animation: none; }
}