/* ══════════════════════════════════════════════════════════════
   Creative Portfolio
   Token sistemi kaynak şablondan birebir alındı: renkler, yarıçap,
   içerik genişliği ve akışkan (clamp) tipografi ölçeği.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* renk */
  --background: #fff;
  --card: #f5f5f5;
  --foreground: #171717;
  --primary-cta: #171717;
  --primary-cta-text: #fff;
  --secondary-cta: #f5f5f5;
  --secondary-cta-text: #171717;

  /* ölçü */
  --radius: 1rem;
  --content: clamp(40rem, 67.5vw, 61rem);
  --gap: 1.35rem;

  /* akışkan tipografi */
  --text-2xs: clamp(.465rem, .62vw, .62rem);
  --text-xs:  clamp(.54rem, .72vw, .72rem);
  --text-sm:  clamp(.615rem, .82vw, .82rem);
  --text-base:clamp(.69rem, .92vw, .92rem);
  --text-lg:  clamp(.75rem, 1vw, 1rem);
  --text-xl:  clamp(.825rem, 1.1vw, 1.1rem);
  --text-2xl: clamp(.975rem, 1.3vw, 1.3rem);
  --text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
  --text-4xl: clamp(1.5rem, 2vw, 2rem);
  --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
  --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
  --text-7xl: clamp(3rem, 4vw, 4rem);
  --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
  --text-9xl: clamp(5.25rem, 7vw, 7rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --primary-grad: linear-gradient(#171717 0%, #101010 100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7rem; }
body{
  margin:0; background:var(--background); color:var(--foreground);
  font:400 16px/1.5 "Inter Tight", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
hr{ border:0; margin:0; }

.sprite{ position:absolute; width:0; height:0; }
svg:not(.sprite){
  width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
:focus-visible{ outline:2px solid var(--foreground); outline-offset:3px; border-radius:6px; }

.skip{
  position:fixed; left:1rem; top:-4rem; z-index:300;
  background:var(--foreground); color:#fff; padding:.75rem 1.25rem;
  border-radius:999px; font-size:var(--text-sm); transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

.wrap{ width:min(100% - 2.5rem, var(--content)); margin-inline:auto; }
.center{ display:flex; justify-content:center; }
.dim{ opacity:.55; }

/* ── dekoratif ışıklar ──────────────────────────────────────── */
.blob{
  position:absolute; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--foreground) 35%, transparent 70%);
  opacity:.09; pointer-events:none;
}
.blob--tr{ top:0; right:0; transform:translate(50%,-50%); }
.blob--bl{ bottom:0; left:0; transform:translate(-50%,50%); }

/* ── intro ──────────────────────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:500; display:grid; place-items:center;
  background:var(--foreground);
  transition:opacity .7s var(--ease), visibility .7s;
}
.intro.is-done{ opacity:0; visibility:hidden; }
.intro__in{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.intro__ava{
  width:5.5rem; height:5.5rem; border-radius:50%; overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  animation:intro-pop .8s var(--ease) both;
}
.intro__ava img{ width:100%; height:100%; object-fit:cover; }
.intro__name{
  font-size:var(--text-5xl); font-weight:500; letter-spacing:-.03em;
  color:rgba(255,255,255,.82); animation:intro-pop .8s .1s var(--ease) both;
}
@keyframes intro-pop{ from{ opacity:0; transform:translateY(14px) scale(.94); } }

/* ── marka işareti ──────────────────────────────────────────── */
.intro__ava .brandmark,
.nav__brand .brandmark,
.btn__ava .brandmark,
.faq__who .brandmark{ object-fit:cover; background:transparent; padding:0; }

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed; z-index:200; top:1.25rem; left:50%; transform:translateX(-50%);
  width:min(100% - 2.5rem, var(--content));
}
.nav__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:4.375rem; padding:.75rem .75rem .75rem 1rem;
  background:var(--card); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(23,23,23,.05), 0 18px 40px -18px rgba(23,23,23,.25);
}
.nav__brand{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.nav__brand img{ width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover; flex:none; }
.nav__brand span{ font-size:var(--text-lg); font-weight:500; letter-spacing:-.01em; }

.nav__toggle{
  display:grid; place-items:center; width:2.875rem; height:2.875rem; flex:none;
  border-radius:50%; background:var(--primary-grad); color:var(--primary-cta-text);
  box-shadow:0 6px 16px -6px rgba(23,23,23,.6);
  transition:transform .3s var(--ease);
}
.nav__toggle svg{ width:1.15rem; height:1.15rem; }
.nav__toggle:hover{ transform:rotate(90deg); }
.nav__toggle-x{ display:none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-o{ display:none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-x{ display:block; }
.nav__toggle[aria-expanded="true"]{ transform:none; }

.nav__menu{
  margin-top:.6rem; padding:.6rem; background:var(--card);
  border-radius:var(--radius); box-shadow:0 18px 40px -18px rgba(23,23,23,.3);
  display:grid; gap:.15rem;
  animation:menu-in .28s var(--ease) both;
}
.nav__menu[hidden]{ display:none; }
.nav__menu a{
  padding:.7rem 1rem; border-radius:calc(var(--radius) - .35rem);
  font-size:var(--text-lg); font-weight:500;
  transition:background-color .2s var(--ease);
}
.nav__menu a:hover{ background:rgba(23,23,23,.06); }
@keyframes menu-in{ from{ opacity:0; transform:translateY(-8px); } }

/* ── ortak parçalar ─────────────────────────────────────────── */
.chip{
  width:fit-content; padding:.25rem .75rem; margin-bottom:.25rem;
  background:var(--card); border-radius:var(--radius);
  font-size:var(--text-sm); line-height:1.5;
}
.chip--dot{ display:flex; align-items:center; gap:.5rem; backdrop-filter:blur(8px); }
.chip--dot i{ width:.5rem; height:.5rem; border-radius:50%; background:#22c55e; flex:none; }

.btn{
  display:inline-flex; align-items:center; gap:.75rem; width:fit-content;
  border-radius:999px; font-weight:500; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.btn--primary{
  padding:.75rem 1.5rem .75rem .75rem; font-size:var(--text-base); font-weight:600;
  background:var(--primary-grad); color:var(--primary-cta-text);
  box-shadow:0 10px 26px -12px rgba(23,23,23,.85);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(23,23,23,.9); }
.btn__ava{ position:relative; display:block; width:2.5rem; height:2.5rem; flex:none; }
.btn__ava img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.45);
}
/* avatarın üzerine gelince arama ikonu belirir */
.btn__ava i{
  position:absolute; inset:0; display:grid; place-items:center;
  font-style:normal; color:#fff;
  background:rgba(23,23,23,.55); backdrop-filter:blur(2px);
  border-radius:50%; opacity:0;
  transition:opacity .3s var(--ease);
}
.btn__ava i svg{ width:1.05rem; height:1.05rem; stroke-width:2; }
.btn--primary:hover .btn__ava i,
.btn--primary:focus-visible .btn__ava i{ opacity:1; }

.btn--secondary{
  padding:.75rem 1.5rem; font-size:var(--text-base);
  background:var(--secondary-cta); color:var(--secondary-cta-text);
}
.btn--secondary svg{ width:1.05rem; height:1.05rem; transition:transform .3s var(--ease); }
.btn--secondary:hover{ background:#ececec; }
.btn--secondary:hover svg{ transform:translateX(4px); }

.btn--sm{ height:2.5rem; padding:0 1.5rem; font-size:var(--text-sm); border-radius:var(--radius); }
.btn--block{ width:100%; justify-content:center; height:2.75rem; padding:0 1.5rem;
  border-radius:var(--radius); font-size:var(--text-sm); }

.sec{ padding-block:5rem; position:relative; }
.sec--tight{ padding-block:4rem; }
.stack-lg{ display:flex; flex-direction:column; gap:2rem; }

.head{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.head h2{
  max-width:80%; font-size:var(--text-6xl); line-height:1.15;
  font-weight:600; letter-spacing:-.03em; text-wrap:balance;
}
.head__lede{ max-width:70%; font-size:var(--text-xl); line-height:1.375; text-wrap:balance; }
.head .btn{ margin-top:.5rem; }
.head--sm h2{ font-size:var(--text-5xl); max-width:none; }

.rule{ width:100%; height:1px; background:rgba(23,23,23,.08); }
.rule--strong{ background:rgba(23,23,23,.5); margin-bottom:1.25rem; }

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:9rem 5rem; overflow:hidden;
}
.hero__in{ display:flex; align-items:center; gap:5rem; }
.hero__copy{ width:46%; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; }
.hero__side{ width:54%; height:24rem; }

/* kaynaktaki gibi: 6xl (mobil) → 7xl (md) → 8xl (2xl) */
.hero h1{
  font-size:var(--text-7xl); line-height:1.05; font-weight:500; letter-spacing:-.025em;
}
@media (min-width:1536px){ .hero h1{ font-size:var(--text-8xl); } }
.grad{
  display:inline; background:linear-gradient(to right, var(--foreground), #4a4a4a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.grad b{ font-weight:700; }
.hero__lede{ font-size:var(--text-lg); font-weight:500; line-height:1.375; max-width:95%; }
.hero__lede strong{ display:block; font-weight:500; }
.hero__lede span{ opacity:.55; }

/* ── selected work ──────────────────────────────────────────── */
.works{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.works li{ display:flex; flex-direction:column; gap:1rem; }
.frame{
  position:relative; aspect-ratio:4/3; padding:.75rem;
  background:var(--card); border-radius:var(--radius);
  box-shadow:0 25px 50px -12px rgba(23,23,23,.25);
  /* transform scroll'a bağlı sürülüyor; CSS geçişi araya girmemeli */
  will-change:transform;
}
.works li{ position:relative; }
/* mutlak konum: görselin doğal boyu çerçevenin 4/3 oranını bozmasın */
.frame img{
  position:absolute; inset:.75rem;
  width:calc(100% - 1.5rem); height:calc(100% - 1.5rem);
  object-fit:cover; border-radius:calc(var(--radius) - .35rem);
}
.frame__tag{
  position:absolute; left:1.5rem; bottom:1.5rem;
  padding:.3rem .75rem; font-size:var(--text-sm);
  border-radius:999px;                        /* rounded-full */
  background-color:rgb(255 255 255 / .15);
  border:1px solid rgb(255 255 255 / .2);
  backdrop-filter:blur(24px);
  color:#fff;
}
.works p{ font-size:var(--text-2xl); line-height:1.375; }
.works p strong{ font-weight:600; }

/* ── testimonial ────────────────────────────────────────────── */
.quote{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; }
.stars{ display:flex; gap:.375rem; }
.stars svg{ width:1.15rem; height:1.15rem; fill:var(--foreground); stroke:none; }
.quote__text{
  max-width:80%; font-size:var(--text-5xl); line-height:1.15;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance;
}
.quote__by{ font-size:var(--text-lg); opacity:.55; }

/* ── about ──────────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns:3fr 2fr; gap:var(--gap); }
.about__panel{
  position:relative; padding:5rem; background:var(--card); border-radius:var(--radius);
  display:flex; flex-direction:column; justify-content:center; gap:1.25rem;
}
.about__badge{
  position:absolute; top:-2rem; left:-2rem; display:grid; place-items:center;
  width:4rem; height:4rem; border-radius:var(--radius);
  background:var(--primary-grad); color:var(--primary-cta-text);
  box-shadow:0 14px 30px -14px rgba(23,23,23,.8);
}
.about__badge svg{ width:1.5rem; height:1.5rem; fill:currentColor; stroke:none; }
.about__text{
  font-size:var(--text-5xl); line-height:1.15; font-weight:600;
  letter-spacing:-.02em; text-wrap:balance;
}
.about__who{ display:flex; align-items:center; gap:.5rem; font-size:var(--text-lg); }
.about__who i{ font-style:normal; opacity:.4; }

.about__pic{ position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--card); padding:1px; }
.about__pic > img{ position:absolute; inset:1px;
  width:calc(100% - 2px); height:calc(100% - 2px);
  object-fit:cover; border-radius:var(--radius); }
.glassrow{
  position:absolute; inset-inline:0; bottom:0; display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:center; gap:.75rem; padding:1.5rem;
}
.glasspill{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.25rem; padding:0 .75rem; border-radius:999px;
  font-size:var(--text-sm); color:var(--primary-cta-text);
  background:rgba(23,23,23,.45); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.18);
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.glasspill svg{ width:.95rem; height:.95rem; }
.glasspill:hover{ background:rgba(23,23,23,.7); transform:translateY(-2px); }

/* ── services ───────────────────────────────────────────────── */
.services{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.svc{
  display:flex; flex-direction:column; gap:.875rem; padding:.875rem;
  background:var(--card); border-radius:var(--radius);
}
/* 6 kart, dönüşümlü asimetrik ritim: 5-7 / 7-5 / 5-7 */
.svc:nth-child(1),
.svc:nth-child(4),
.svc:nth-child(5){ grid-column:span 5; }
.svc:nth-child(2),
.svc:nth-child(3),
.svc:nth-child(6){ grid-column:span 7; }
.svc__pic{
  height:18rem; border-radius:calc(var(--radius) - .35rem); overflow:hidden;
  background:rgba(23,23,23,.05); box-shadow:0 1px 2px rgba(23,23,23,.05);
}
.svc__pic img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc:hover .svc__pic img{ transform:scale(1.04); }
.svc__txt{ display:flex; flex-direction:column; gap:.25rem; padding:.875rem; }
.svc__txt h3{ font-size:var(--text-2xl); font-weight:600; letter-spacing:-.01em; }
.svc__txt p{ font-size:var(--text-lg); line-height:1.375; opacity:.55; }

/* ── faq ────────────────────────────────────────────────────── */
.faq{
  display:flex; flex-direction:column; gap:2.5rem;
  padding:2.5rem; background:var(--card); border-radius:var(--radius);
}
.tabs{
  position:relative; display:inline-flex; gap:.25rem; padding:.25rem; margin-top:.75rem;
  background:var(--background); border-radius:999px;
}
.tabs button{
  position:relative; z-index:1; padding:.5rem 1.25rem; border-radius:999px;
  font-size:var(--text-sm); font-weight:500; color:var(--foreground);
  transition:color .3s var(--ease);
}
.tabs button[aria-selected="true"]{ color:var(--primary-cta-text); }
.tabs__ink{
  position:absolute; z-index:0; inset-block:.25rem; left:0; width:0;
  border-radius:999px; background:var(--primary-grad); pointer-events:none;
  transition:transform .35s var(--ease), width .35s var(--ease);
}

.acc{ display:flex; flex-direction:column; gap:.875rem; }
.acc[hidden]{ display:none; }
.acc__row{ background:var(--background); border-radius:var(--radius); overflow:hidden; }
.acc__row > button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.875rem;
  padding:.875rem; text-align:left;
  font-size:var(--text-xl); font-weight:500; line-height:1.375;
}
.acc__btn{
  display:grid; place-items:center; flex:none; width:2.25rem; height:2.25rem;
  border-radius:calc(var(--radius) - .35rem);
  background:var(--primary-grad); color:var(--primary-cta-text);
  transition:transform .35s var(--ease);
}
.acc__btn svg{ width:1rem; height:1rem; }
.acc__row > button[aria-expanded="true"] .acc__btn{ transform:rotate(135deg); }
.acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.acc__row > button[aria-expanded="true"] + .acc__a{ grid-template-rows:1fr; }
.acc__a > p{
  overflow:hidden; margin-inline:.875rem;
  font-size:var(--text-lg); line-height:1.5; opacity:.55;
}
.acc__row > button[aria-expanded="true"] + .acc__a > p{ padding-bottom:1rem; }

.faq__foot{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.faq__who{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.faq__who img{ width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover; flex:none; }
.faq__who span{ display:flex; flex-direction:column; min-width:0; }
.faq__who b{ font-size:var(--text-lg); font-weight:500; }
.faq__who a{ font-size:var(--text-base); opacity:.55; }
.faq__who a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* ── contact ────────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.contact__panel{ padding:2.5rem; background:var(--card); border-radius:var(--radius); }
.form{ display:flex; flex-direction:column; gap:1.5rem; }
.form__fields{ display:flex; flex-direction:column; gap:.75rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field span{ font-size:var(--text-sm); opacity:.55; }
.field input,.field textarea{
  width:100%; padding:.75rem .875rem; border-radius:calc(var(--radius) - .35rem);
  background:var(--background); border:1px solid transparent; color:var(--foreground);
  font:inherit; font-size:var(--text-base); resize:vertical;
  transition:border-color .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(23,23,23,.35); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--foreground); }
.form__status{ font-size:var(--text-sm); opacity:.7; min-height:1.2em; }
.form__status--error{ color:#c0392b; opacity:1; }
.form .btn--block{ margin-top:.25rem; }

.contact__pic{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--card); }
.contact__pic > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.contact__pic .glassrow{ inset:0; align-items:flex-end; }

/* ── footer ─────────────────────────────────────────────────── */
.foot{ padding-block:5rem; }
.foot__card{ padding:0 2.5rem 1.25rem; background:var(--card); border-radius:var(--radius); }
.foot__word{
  padding-block:1.25rem; font-size:var(--text-9xl); font-weight:600;
  letter-spacing:-.045em; line-height:1; white-space:nowrap;
}
.foot__bar{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:.75rem;
  font-size:var(--text-base);
}
.foot__bar > span:first-child{ opacity:.75; }
.foot__links{ display:flex; gap:1.25rem; }
.foot__links a{ opacity:.75; transition:opacity .2s var(--ease); }
.foot__links a:hover{ opacity:1; }

/* ── proje önizleme penceresi ───────────────────────────────── */
.works .frame{ width:100%; cursor:pointer; text-align:left; }
.works .frame:hover .frame__tag{ background-color:rgb(255 255 255 / .28); }

.modal{ position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  padding:clamp(.75rem, 2.5vw, 2rem); }
.modal[hidden]{ display:none; }
.modal__veil{ position:absolute; inset:0; background:rgba(23,23,23,.55);
  backdrop-filter:blur(6px); animation:veil-in .25s var(--ease) both; }
@keyframes veil-in{ from{ opacity:0; } }

.modal__box{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) 22rem; gap:1rem;
  width:min(100%, 78rem); height:75vh;          /* sayfanın dörtte üçü */
  padding:1rem; background:var(--background); border-radius:var(--radius);
  box-shadow:0 40px 90px -30px rgba(23,23,23,.5);
  animation:box-in .3s var(--ease) both;
}
@keyframes box-in{ from{ opacity:0; transform:translateY(14px) scale(.985); } }

.modal__view{
  position:relative; overflow:hidden; border-radius:calc(var(--radius) - .25rem);
  background:var(--foreground); min-height:0;
}
/* iframe sabit bir mantıksal genişlikte çizilir (768px üstü → 1440,
   altı → 390) ve JS ile ölçeklenip kutuya sığdırılır. Böylece gömülü site
   kendi masaüstü ya da mobil düzenini gösterir. */
.modal__frame{
  border:0; display:block; background:var(--foreground);
  transform-origin:0 0; width:1440px; height:100%;
}
.modal__empty{
  position:absolute; inset:0; display:none; place-content:center; align-items:center;
  padding:2rem; text-align:center; color:rgba(255,255,255,.75);
  font-size:var(--text-lg); line-height:1.5;
}
.modal__empty span{ display:block; margin-top:.5rem; font-size:var(--text-base); color:rgba(255,255,255,.45); }
.modal__empty code{ font-family:ui-monospace, monospace; color:rgba(255,255,255,.7); }
.modal.is-empty .modal__frame{ visibility:hidden; }
.modal.is-empty .modal__empty{ display:grid; }

/* gömülmeye izin vermeyen siteler için ekran görüntüsü */
.modal__shot{ position:absolute; inset:0; display:none; }
.modal__shot img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.modal__shot p{
  position:absolute; inset-inline:0; bottom:0; padding:.75rem 1rem;
  text-align:center; font-size:var(--text-sm); color:rgba(255,255,255,.9);
  background:linear-gradient(transparent, rgba(23,23,23,.85) 55%);
}
.modal.is-shot .modal__frame{ visibility:hidden; }
.modal.is-shot .modal__shot{ display:block; }

.modal__side{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem;
  padding:1.25rem 1.25rem 1.25rem .25rem; overflow-y:auto;
}
.modal__close{
  position:absolute; top:.25rem; right:0; display:grid; place-items:center;
  width:2.25rem; height:2.25rem; border-radius:50%; background:var(--card);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.modal__close svg{ width:1.05rem; height:1.05rem; }
.modal__close:hover{ background:#e8e8e8; transform:rotate(90deg); }

.modal__title{
  display:inline-flex; align-items:center; gap:.4rem; padding-right:2.75rem;
  font-size:var(--text-3xl); font-weight:600; letter-spacing:-.02em; line-height:1.15;
}
.modal__title svg{ width:.85em; height:.85em; stroke-width:2.2; flex:none; }
.modal__title:hover{ text-decoration:underline; text-underline-offset:4px; }

.modal__by{ display:flex; align-items:center; gap:.5rem; font-size:var(--text-base); }
.modal__by img{ width:1.75rem; height:1.75rem; border-radius:8%;
  object-fit:cover; background:transparent; }
.modal__tick{ width:1rem; height:1rem; color:#3B82F6; fill:currentColor; stroke:none; }

.modal__cta{ margin-top:.25rem; }
.modal__h{ margin-top:.75rem; font-size:var(--text-xl); font-weight:600; }
.modal__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.modal__tags li{ padding:.25rem .75rem; background:var(--card); border-radius:999px;
  font-size:var(--text-sm); }
.modal__desc{ font-size:var(--text-base); line-height:1.55; opacity:.6; }

body.is-locked{ overflow:hidden; }

@media (max-width:900px){
  .modal{ padding:0; }                          /* mobilde tam ekran */
  .modal__box{
    grid-template-columns:1fr; grid-template-rows:minmax(12rem,1.1fr) auto;
    width:100%; height:100vh; height:100dvh;
    border-radius:0; padding:.75rem; gap:.75rem;
  }
  .modal__view{ min-height:12rem; }
  .modal__side{ padding:.25rem .25rem 1rem; overflow-y:auto; }
  .modal__close{ top:-.25rem; }
}

/* ── sabit WhatsApp düğmesi ─────────────────────────────────── */
.wa{
  position:fixed; z-index:190;
  right:clamp(1rem, 2.5vw, 1.75rem);
  bottom:calc(clamp(1rem, 2.5vw, 1.75rem) + env(safe-area-inset-bottom));
  display:grid; place-items:center; width:3.75rem; height:3.75rem;
  border-radius:50%; background:#25D366; color:#fff;
  box-shadow:0 6px 16px rgba(37,211,102,.4), 0 2px 6px rgba(23,23,23,.18);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa svg{ width:2rem; height:2rem; fill:currentColor; stroke:none; }
.wa:hover{ transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 26px rgba(37,211,102,.48), 0 3px 8px rgba(23,23,23,.2); }
.wa::after{ /* nabız halkası */
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:wa-pulse 2.6s var(--ease) infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.55; }
  70%,100%{ transform:scale(1.55); opacity:0; }
}

/* ── hareket ────────────────────────────────────────────────── */
[data-fade]{ opacity:0; transform:translateY(16px); }
.is-ready [data-fade]{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.is-ready [data-fade="1"]{ transition-delay:.05s; }
.is-ready [data-fade="2"]{ transition-delay:.15s; }
.is-ready [data-fade="3"]{ transition-delay:.25s; }
.is-ready [data-fade="4"]{ transition-delay:.35s; }

/* kelime kelime beliren başlıklar */
.word{ display:inline-block; opacity:0; }

/* ── duyarlı ────────────────────────────────────────────────── */
@media (max-width:900px){
  :root{ --content:100%; }
  .hero{ min-height:auto; padding-block:8.5rem 4rem; }
  .hero__in{ flex-direction:column; gap:2.5rem; }
  .hero__copy{ width:100%; align-items:center; text-align:center; }
  .hero h1,.hero__lede{ text-align:center; }
  /* mobilde de görünür: uçan destenin ineceği yuva */
  .hero__side{ position:relative; width:100%; height:20rem; }
  .hero__side::before{
    content:""; position:absolute; inset:0;
    background:var(--card); border-radius:var(--radius);
  }

  .head h2,.head__lede,.quote__text{ max-width:100%; }
  .works{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__panel{ padding:2.5rem; }
  .about__badge{ top:-1.75rem; left:-.5rem; width:3.5rem; height:3.5rem; }
  .about__pic{ aspect-ratio:1; }
  .services{ grid-template-columns:1fr; }
  /* :nth-child(n) — üstteki nth-child kurallarıyla eşit özgüllük, hepsini sıfırlar */
  .svc:nth-child(n){ grid-column:auto; }
  .contact{ grid-template-columns:1fr; }
  .contact__pic{ height:25rem; }
  .faq{ padding:1.5rem; gap:1.5rem; }
  .faq__foot{ flex-direction:column; align-items:stretch; }
  .tabs{ flex-wrap:nowrap; overflow:visible; }
  .tabs button{ padding:.5rem .875rem; }
  .foot__card{ padding-inline:1.5rem; }
  .foot__word{ font-size:var(--text-7xl); }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
  .nav{ top:.75rem; }
}

@media (max-width:767px){
  .hero h1{ font-size:var(--text-6xl); }
  .about__text{ font-size:var(--text-4xl); }
}
@media (min-width:1536px){
  .head h2{ font-size:var(--text-7xl); }
  .quote__text{ font-size:var(--text-6xl); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  [data-fade]{ opacity:1; transform:none; }
  .word{ opacity:1!important; }
  .intro{ display:none; }
  .wa::after{ display:none; }
}