:root{
  --sidebar-w: 280px;
  --topbar-h: 62px;
  --font-head: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Warm, architectural palette */
  --bg: #f6f3ee;
  --surface: #ffffff;
  --text: #141414;
  --muted: #6b6b6b;
  --line: rgba(20,20,20,.14);
  --accent: #b08d57;

  
  --cream: #fbf4e6;
  --cream-2: #f2eadb;
  --accent-soft: rgba(176,141,87,.18);
  --accent-soft-2: rgba(176,141,87,.10);
--radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 45px rgba(0,0,0,.10);
  --shadow-soft: 0 12px 28px rgba(0,0,0,.08);
  --max: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

::selection{ background: rgba(176,141,87,.22); }
html, body{ height:100%; }

body.pr-open{ overflow:hidden; }


body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  margin-left: var(--sidebar-w);
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

.content{ min-height:100vh; }

/* =========================
   NAV
========================= */

.topbar{ display:none; }
.nav-backdrop{ display:none; }


/* =========================
   HERO MEDIA (optional)
========================= */
.hero-image{
  position: relative;
  overflow: hidden;
}
.hero-image .hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.06);
  filter: blur(2px);
}
.hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.42);
}
.hero-image::after{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(ellipse at 20% 20%, rgba(176,141,87,.35), transparent 55%),
              radial-gradient(ellipse at 80% 30%, rgba(255,255,255,.14), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  opacity: .9;
  filter: blur(6px);
}
.hero-image > :not(.hero-media){
  position:relative;
  z-index: 1;
}


.sidebar{
  width: var(--sidebar-w);
  background: #f9f7f3;
  border-right: 1px solid var(--line);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  padding: 36px 28px;
  z-index: 1000;
}

.sidebar-inner{
  height: 100%;
  display:flex;
  flex-direction:column;
}

.logo{
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration:none;
  display:flex;
  align-items:center;
  margin-bottom: 30px;
}

.side-menu{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.side-menu a{
  text-decoration:none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 0;
  position:relative;
}

.side-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:0;
  height:1px;
  background: rgba(176,141,87,.85);
  transition: width .25s ease;
}

.side-menu a:hover{ color: var(--text); }
.side-menu a:hover::after{ width: 28px; }

.side-menu a.active{
  color: var(--text);
}
.side-menu a.active::after{ width: 42px; }

.side-meta{
  margin-top:auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.side-meta-title{
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.side-meta-link{
  text-decoration:none;
  font-size: 13px;
  color: var(--text);
  opacity: .9;
}

.side-meta-link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-toggle{
  -webkit-tap-highlight-color: transparent;
}


.topbar{ display:none; }
.nav-backdrop{ display:none; }

/* =========================
   HERO (homepage header stays same markup)
========================= */
.hero{
  height:100vh;
  background: url("img/firstpage/p1.png") center/cover no-repeat;
  position:relative;
  transition: background .35s ease;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.58));
  pointer-events:none;
}

.grid{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
}

.grid-item{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.55);
}

.grid-item .overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding: 28px;
  background: rgba(12,12,12,.62);
  opacity:0;
  transition: .25s ease;
  color:#fff;
}

.grid-item .overlay h3{
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.15;
}

.grid-item .overlay span{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.grid-item:hover .overlay{ opacity:1; }
.grid-item.active .overlay{ opacity:1; }

/* Scroll hint */
.scroll-hint{
  position:absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  z-index:2;
  pointer-events:none;
}

.scroll-hint span{
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mouse{
  width: 30px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 14px;
  position: relative;
}

.wheel{
  width: 5px;
  height: 10px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.4s infinite;
}

@keyframes scrollWheel{
  0%{ opacity:0; top: 6px; }
  30%{ opacity:1; }
  100%{ opacity:0; top: 22px; }
}

/* =========================
   HOMEPAGE PROJECTS
========================= */
.projects{
  padding: 92px 8vw;
}

.projects-header{
  max-width: var(--max);
  margin: 0 auto 34px;
}

.projects-header h2{
  font-family: var(--font-head);
  font-size: 42px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.projects-header p{
  margin-top: 10px;
  color: var(--muted);
  max-width: 560px;
}

.projects-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.project-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}


/* Card focus flash (used when clicking hero tiles) */
.project-card.flash{
  animation: cardFlashPulse 3s ease-in-out;
}

.project-card.flash::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  border: 1px solid rgba(176,141,87,.55);
  box-shadow: 0 16px 60px rgba(176,141,87,.22);
  opacity: 0;
  pointer-events:none;
  animation: cardFlashRing 3s ease-in-out;
}

@keyframes cardFlashPulse{
  0%{ filter: brightness(1) saturate(1); transform: translateY(0); }
  10%{ filter: brightness(1.10) saturate(1.06); transform: translateY(-2px); }
  25%{ filter: brightness(1.02) saturate(1.02); transform: translateY(0); }
  40%{ filter: brightness(1.09) saturate(1.05); }
  55%{ filter: brightness(1.03) saturate(1.02); }
  70%{ filter: brightness(1.08) saturate(1.04); }
  100%{ filter: brightness(1) saturate(1); }
}

@keyframes cardFlashRing{
  0%{ opacity: 0; }
  12%{ opacity: .9; }
  30%{ opacity: .2; }
  48%{ opacity: .75; }
  66%{ opacity: .25; }
  85%{ opacity: .6; }
  100%{ opacity: 0; }
}

.project-card img{
  width:100%;
  height: 260px;
  object-fit: cover;
  transition: transform .65s ease;
  /* On mobile, some browsers can treat plain images as standalone targets.
     The card is the interactive element, so we disable direct image taps. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.project-card:hover img{ transform: scale(1.06); }

.project-info{
  position: relative;
  inset:auto;
  padding: 18px 18px 20px;
  background: transparent;
  color: var(--text);
}

.project-info h3{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.project-info span{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects-more{
  max-width: var(--max);
  margin: 30px auto 0;
}

.btn-more{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  background: transparent;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.btn-more:hover{
  background: var(--surface);
  border-color: rgba(20,20,20,.22);
  transform: translateY(-1px);
}

/* =========================
   PROJECT REVEAL (INLINE POPUP)
========================= */
/* Backdrop for project modal */
.pr-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.38);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index: 2050;
  backdrop-filter: blur(2px);
}
.pr-backdrop.open{
  opacity: 1;
  pointer-events:auto;
}

/* Modal mode: show reveal as a viewport overlay (no page scroll) */
.project-reveal.modal{
  position:fixed;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: min(1100px, calc(100vw - 20px));
  height: auto;
  max-height: calc(100vh - 20px);
  margin: 0;
  z-index: 2100;
  transform: translateX(-50%) translateY(14px) scale(.985);
}
.project-reveal.modal.open{
  transform: translateX(-50%) translateY(0) scale(1);
}

@media (max-width: 920px){
  .project-reveal.modal{
    left: 10px;
    right: 10px;
    width: auto;
    top: 10px;
    bottom: 10px;
    transform: translateY(8px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 42svh) 1fr;
  }
  .project-reveal.modal.open{
    transform: translateY(0);
  }
}

.project-card,
.pp-card{ cursor:pointer; }

.projects-grid,
.projects-page-grid{ position:relative; }

/* When a project is opened on desktop, we may temporarily hide the rest
   and keep only the "next 3" suggestions visible below the reveal. */
@media (min-width: 921px){
  .reveal-focus .pr-hidden{ display:none !important; }
}

/* Used on mobile/tablet: when a card is opened we replace it with the reveal,
   so the same project isn't shown twice. */
.pr-replaced{ display:none !important; }

@keyframes revealIn{
  from{ opacity:0; transform: translateY(14px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.project-reveal{
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 50;
  display:grid;
  grid-template-columns: 2fr 1fr;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(20,20,20,.16);
  background: rgba(253,250,244,.94);
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transform: translateY(14px) scale(.985);
  backdrop-filter: blur(8px);
}

.project-reveal.open{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0) scale(1);
  animation: revealIn .28s ease both;
}

.project-reveal::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 480px at 20% 15%, rgba(196,145,52,.16), transparent 55%),
    radial-gradient(620px 420px at 85% 75%, rgba(196,145,52,.10), transparent 60%);
  pointer-events:none;
  mix-blend-mode: multiply;
}

.project-reveal-close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(20,20,20,.18);
  background: rgba(255,255,255,.7);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  z-index: 2;
}

.project-reveal-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  border-color: rgba(20,20,20,.28);
}

.project-reveal-media{
  position:relative;
  min-height: 420px;
}

/* Slider (3 görsel) */
.pr-viewport{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  /* Mobilde görsel “zoom out” dursun diye: arka planı aktif slide'dan alıp blur ile dolduracağız */
  --pr-bg: none;
  background: #0f0f0f;
}

.pr-viewport::before{ display:none !important; }

.pr-track{
  position:relative;
  z-index: 1;
  height:100%;
  display:flex;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}

.pr-track .pr-slide{
  width:100%;
  height:100%;
  flex: 0 0 100%;
  object-fit: cover;
  transform: scale(1);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events:none; /* prevent image-only taps opening external on mobile */
}

.pr-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,20,20,.28);
  color: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.pr-arrow:hover{
  transform: translateY(-50%) scale(1.03);
  background: rgba(20,20,20,.36);
  border-color: rgba(255,255,255,.34);
}

.pr-prev{ left: 14px; }
.pr-next{ right: 14px; }

.pr-dots{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(20,20,20,.18);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

.pr-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.42);
  opacity: .55;
  cursor:pointer;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.pr-dot.is-active{
  opacity: 1;
  background: rgba(255,255,255,.92);
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(255,255,255,.10);
}

.project-reveal-body{
  position:relative;
  padding: 26px 22px 22px;
  border-left: 1px solid rgba(20,20,20,.12);
  overflow:auto;
}

.project-reveal-body h3{
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 2px 0 10px;
}

.project-reveal-meta{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,20,20,.60);
}

.project-reveal-meta::before{
  content:"";
  width: 18px;
  height: 1px;
  background: rgba(196,145,52,.65);
}

.project-reveal-desc{
  margin-top: 14px;
  color: rgba(20,20,20,.74);
  line-height: 1.7;
  font-size: 14px;
}

.project-reveal-specs{
  margin-top: 16px;
  padding-left: 0;
  list-style:none;
  display:grid;
  gap: 10px;
}

.project-reveal-specs li{
  background: rgba(196,145,52,.10);
  border: 1px solid rgba(196,145,52,.18);
  color: rgba(20,20,20,.80);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.project-reveal-specs li strong{
  font-weight: 600;
  color: rgba(20,20,20,.86);
}


/* =========================
   FOOTER
========================= */
.footer{
  background: #f9f7f3;
  border-top: 1px solid var(--line);
  padding: 54px 8vw 22px;
}

.footer-container{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

.footer-divider{ display:none; }

.footer-col h3{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.footer-col p{
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 10px;
}

.footer-col ul{ list-style:none; }
.footer-col ul li{ margin-bottom: 12px; }
.footer-col ul li a{
  text-decoration:none;
  color: var(--text);
  opacity:.85;
}
.footer-col ul li a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-social{
  display:flex;
  gap: 12px;
  margin-top: 14px;
}

.footer-social a{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--text);
  background: transparent;
  transition: transform .2s ease, background .2s ease;
}

.footer-social a:hover{
  background: var(--surface);
  transform: translateY(-2px);
}

.footer-cta .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  color: var(--text);
  margin-bottom: 10px;
  background: transparent;
  transition: background .2s ease, transform .2s ease;
}

.footer-cta .btn:hover{
  background: var(--surface);
  transform: translateY(-1px);
}

.footer-bottom{
  max-width: var(--max);
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: rgba(20,20,20,.55);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================
   ABOUT
========================= */
.about-hero{
  min-height: 74vh;
  background: linear-gradient(180deg, #f6f3ee, #efeae2);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:flex-end;
  padding: 96px 8vw 70px;
}


.about-hero.about-hero--image{
  background: #0f0f0f;
  color: #fff;
}
.about-hero.about-hero--image h1{ color:#fff; }
.about-hero.about-hero--image p{ color: rgba(255,255,255,.82); }


.about-hero-inner{
  max-width: var(--max);
}

.about-hero-inner h1{
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(40px, 6vw, 74px);
  color: var(--text);
}

.about-hero-inner p{
  max-width: 640px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.about-block{
  max-width: var(--max);
  margin: 0 auto;
  padding: 84px 8vw;
}

.about-block h2{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.about-block p{
  color: var(--muted);
  line-height: 1.9;
  font-size: 16px;
}

.about-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 8vw 84px;
}

.about-grid > div{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: none;
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.about-grid > div::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(176,141,87,.22), transparent 55%),
              radial-gradient(circle at 80% 40%, rgba(176,141,87,.10), transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  filter: blur(10px);
}
.about-grid > div:hover{
  transform: translateY(-2px);
  background: var(--cream);
  border-color: rgba(176,141,87,.32);
  box-shadow: var(--shadow-soft);
}
.about-grid > div:hover::before{ opacity: 1; }


.about-grid h3{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--text);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20,20,20,.04);
  border: 1px solid rgba(20,20,20,.08);
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.about-grid > div:hover h3{
  background: rgba(176,141,87,.20);
  border-color: rgba(176,141,87,.28);
  color: #2a2419;
}


.about-grid p{ color: var(--muted); line-height: 1.8; }
.about-grid > div:hover p{ color: rgba(42,36,25,.85); }

.about-stats{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(176,141,87,.10), rgba(246,243,238,0));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 68px 8vw;
  text-align:center;
}
.about-stats::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 20% 40%, rgba(176,141,87,.30), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(176,141,87,.18), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.18), transparent 60%);
  filter: blur(22px);
  opacity: .9;
  animation: amberWave 12s linear infinite;
}
.about-stats::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    135deg,
    rgba(176,141,87,.08) 0px,
    rgba(176,141,87,.08) 1px,
    transparent 1px,
    transparent 14px
  );
  opacity: .20;
  animation: amberDrift 18s linear infinite;
}
.about-stats > div{
  position:relative;
  z-index:1;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(176,141,87,.22);
  border-radius: var(--radius);
  padding: 22px 12px;
  backdrop-filter: blur(6px);
}
@keyframes amberWave{
  0%{ transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  50%{ transform: translate3d(3%, 2%, 0) rotate(8deg); }
  100%{ transform: translate3d(-2%, -1%, 0) rotate(0deg); }
}
@keyframes amberDrift{
  0%{ transform: translateX(-20px); }
  100%{ transform: translateX(20px); }
}


.about-stats span{
  font-family: var(--font-head);
  font-size: 40px;
  color: var(--text);
}

.about-stats small{
  display:block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* =========================
   CONTACT
========================= */
.contact-hero{
  min-height: 52vh;
  background: linear-gradient(180deg, #f6f3ee, #efeae2);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:flex-end;
  padding: 86px 8vw 54px;
}

.contact-hero-inner h1{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 58px);
  letter-spacing: -0.01em;
}

.contact-hero-inner p{
  margin-top: 14px;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.8;
}

.contact-cards{
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 8vw;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.contact-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px;
}

.contact-card i{
  font-size: 20px;
  color: var(--text);
  opacity: .75;
  margin-bottom: 14px;
}

.contact-card h3{
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-card p{
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.7;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .06em;
  background: transparent;
  color: var(--text);
  transition: background .2s ease, transform .2s ease;
}

.contact-btn:hover{ background: var(--bg); transform: translateY(-1px); }

.contact-map{
  border-top: 1px solid var(--line);
  background: #f9f7f3;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 72px 8vw;
}

.contact-map-text{
  max-width: 560px;
}

.contact-map-text h2{
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 14px;
}

.contact-map-text p{
  color: var(--muted);
  line-height: 1.85;
}

.contact-info span{
  display:block;
  margin-top: 12px;
  color: rgba(20,20,20,.78);
}

.contact-info i{ opacity:.7; margin-right: 8px; }

.contact-map-box iframe{
  width:100%;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* =========================
   PROJECTS PAGE
========================= */
.projects-hero{
  min-height: 44vh;
  background: linear-gradient(180deg, #f6f3ee, #efeae2);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:flex-end;
  padding: 86px 8vw 54px;
}


.projects-hero.projects-hero--image{
  background: #0f0f0f;
  color: #fff;
}
.projects-hero.projects-hero--image h1{ color:#fff; }
.projects-hero.projects-hero--image p{ color: rgba(255,255,255,.82); }


.projects-hero-inner h1{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 58px);
  letter-spacing: -0.01em;
}

.projects-hero-inner p{
  margin-top: 14px;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.8;
}

.projects-page-grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 8vw 96px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pp-card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pp-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-soft); }

.pp-card img{
  width:100%;
  height: 280px;
  object-fit: cover;
  transition: transform .65s ease;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.pp-card:hover img{ transform: scale(1.06); }

.pp-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 16px 18px;
  background: rgba(246,243,238,.96);
  border-top: 1px solid rgba(20,20,20,.12);
}

.pp-overlay h3{
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.pp-overlay span{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================
   SERVICES
========================= */
.services{
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 8vw 96px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.service-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 25% 30%, rgba(176,141,87,.18), transparent 55%);
  opacity:0;
  filter: blur(10px);
  transition: opacity .22s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  background: var(--cream);
  border-color: rgba(176,141,87,.28);
  box-shadow: var(--shadow-soft);
}
.service-card:hover::before{ opacity:1; }


.service-card h3{
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.service-card p{
  color: var(--muted);
  line-height: 1.85;
}


/* =========================
   CONTENT SECTIONS (portfolio)
========================= */
.section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 84px 8vw;
}

.section--tight{ padding: 64px 8vw; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(20,20,20,.58);
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 28px;
  height: 1px;
  background: rgba(176,141,87,.85);
}

.section-head h2{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.01em;
}

.section-lead{
  margin-top: 10px;
  color: var(--muted);
  max-width: 720px;
  line-height: 1.85;
  font-size: 15px;
}

.two-col{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items:start;
}

.note-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: none;
}
.note-card h3{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  display:inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(176,141,87,.18);
  border: 1px solid rgba(176,141,87,.24);
  color: #2a2419;
  margin-bottom: 14px;
}
.note-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.note-list li{
  color: rgba(20,20,20,.76);
  line-height: 1.7;
  position:relative;
  padding-left: 18px;
}
.note-list li::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(176,141,87,.85);
  position:absolute;
  left:0;
  top: 10px;
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.kpi{
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(176,141,87,.18);
  border-radius: var(--radius);
  padding: 20px 18px;
  backdrop-filter: blur(6px);
}
.kpi::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(176,141,87,.18), transparent 55%);
  filter: blur(14px);
  opacity: .9;
}
.kpi > *{ position:relative; z-index:1; }
.kpi strong{
  font-family: var(--font-head);
  font-size: 26px;
  letter-spacing: -0.01em;
  display:block;
}
.kpi span{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,20,20,.62);
}

.bullets{
  margin-top: 16px;
  display:grid;
  gap: 10px;
}
.bullets div{
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(20,20,20,.10);
  border-radius: 14px;
  padding: 12px 12px;
  color: rgba(20,20,20,.74);
  line-height: 1.7;
}

.systems-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}

.system-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.system-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 25% 30%, rgba(176,141,87,.16), transparent 55%);
  opacity:0;
  filter: blur(12px);
  transition: opacity .22s ease;
}
.system-card:hover{
  transform: translateY(-2px);
  background: var(--cream);
  border-color: rgba(176,141,87,.26);
  box-shadow: var(--shadow-soft);
}
.system-card:hover::before{ opacity:1; }

.system-card h3{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.system-card p{
  color: var(--muted);
  line-height: 1.75;
}
.system-card ul{
  margin-top: 14px;
  list-style:none;
  display:grid;
  gap: 8px;
}
.system-card li{
  color: rgba(20,20,20,.72);
  line-height: 1.65;
  position:relative;
  padding-left: 16px;
}
.system-card li::before{
  content:"";
  width: 5px; height: 5px;
  border-radius: 99px;
  background: rgba(176,141,87,.85);
  position:absolute;
  left:0; top: 10px;
}

.process{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(176,141,87,.08), rgba(246,243,238,0));
  border-top: 1px solid rgba(20,20,20,.10);
  border-bottom: 1px solid rgba(20,20,20,.10);
}
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.step{
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(176,141,87,.18);
  border-radius: var(--radius);
  padding: 18px 16px;
  position:relative;
  overflow:hidden;
}
.step small{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(20,20,20,.55);
}
.step h4{
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: .02em;
}
.step p{
  margin-top: 8px;
  color: rgba(20,20,20,.70);
  line-height: 1.75;
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.gallery-item{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(20,20,20,.12);
  background: #eee;
  position:relative;
  pointer-events: none; /* galeri resimleri tıklanmasın */
  cursor: default;
}
.gallery-item img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .35s ease;
  filter: saturate(1.02) contrast(1.02);
}
.gallery-item:hover img{ transform: scale(1); }

.faq{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
details.faq-item{
  background: var(--surface);
  border: 1px solid rgba(20,20,20,.12);
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  overflow:hidden;
}
details.faq-item summary{
  cursor:pointer;
  list-style:none;
  font-weight: 500;
  letter-spacing: .01em;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:"+";
  float:right;
  color: rgba(176,141,87,.90);
}
details.faq-item[open] summary::after{ content:"–"; }
details.faq-item p{
  margin-top: 12px;
  color: rgba(20,20,20,.72);
  line-height: 1.8;
}

.cta-band{
  position:relative;
  overflow:hidden;
  border-top: 1px solid rgba(20,20,20,.10);
  border-bottom: 1px solid rgba(20,20,20,.10);
  background: linear-gradient(135deg, rgba(176,141,87,.14), rgba(255,255,255,.0));
}
.cta-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 78px 8vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
}
.cta-inner::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 25% 50%, rgba(176,141,87,.24), transparent 55%),
    radial-gradient(circle at 75% 35%, rgba(176,141,87,.14), transparent 60%);
  filter: blur(18px);
  opacity: .9;
  animation: amberWave 12s linear infinite;
}
.cta-copy{ position:relative; z-index:1; }
.cta-copy h3{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.01em;
}
.cta-copy p{
  margin-top: 10px;
  color: rgba(20,20,20,.70);
  max-width: 640px;
  line-height: 1.85;
}
.btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(176,141,87,.32);
  background: rgba(255,255,255,.78);
  text-decoration:none;
  color: var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  background: var(--cream);
  border-color: rgba(176,141,87,.45);
}



/* =========================
   RESPONSIVE
========================= */
@media (max-width: 920px){
  body{
    margin-left: 0;
    padding-top: var(--topbar-h);
  }

  .topbar{
    display:flex;
    position:fixed;
    top:0; left:0; right:0;
    height: var(--topbar-h);
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 0 16px;
    background: rgba(246,243,238,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    z-index: 2000;
  }

  /* Mobile: üstte logo görünsün ama hamburgeri asla engellemesin */
  .topbar .brand{
    display:flex;
    align-items:center;
    max-width: 240px;
    flex: 0 1 auto;
    padding: 6px 0;
    z-index: 2001;
  }
  .topbar .brand img{
    height: 34px;
    width: auto;
    display:block;
  }

  /* Menü açıkken: üst logo biraz küçülsün + aşağı insin; X'e asla engel olmasın */
  body.nav-open .topbar .brand{
    transform: translateY(4px);
    opacity: .92;
    pointer-events: none; /* yanlışlıkla anasayfaya atmasın */
  }
  body.nav-open .topbar .brand img{ height: 30px; }

  .brand{
    text-decoration:none;
    display:flex;
    flex-direction:column;
    gap: 2px;
  }
  .brand-mark{
    font-family: var(--font-head);
    letter-spacing: .12em;
    font-size: 14px;
  }
  .brand-sub{
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .nav-toggle{
    position: relative;
    z-index: 2002;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 6px;
    cursor:pointer;
  }
  .nav-toggle:hover{ background: rgba(0,0,0,.06); }
  .nav-toggle:active{ background: rgba(0,0,0,.10); }
  .nav-toggle.active{ background: rgba(0,0,0,.06); }

  .nav-toggle span{
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
  }

  .nav-toggle.active span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle.active span:nth-child(2){
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.34);
    opacity: 0;
    pointer-events:none;
    transition: opacity .2s ease;
    z-index: 1600;
  }

  body.nav-open .nav-backdrop{
    opacity: 1;
    pointer-events:auto;
  }

  .sidebar{
    width: min(86vw, 340px);
    left:auto;
    right:0;
    border-right: none;
    border-left: 1px solid var(--line);
    transform: translateX(110%);
    transition: transform .32s ease;
    z-index: 1600;
  }

  .sidebar.open{ transform: translateX(0); box-shadow: var(--shadow); }

  /* Mobile sidebar logo: biraz küçül + aşağı insin */
  .sidebar .logo{
    display:flex;
    justify-content:center;
    margin: 18px 0 22px;
    padding-top: 18px;
  }
  .sidebar .logo img{
    width: min(240px, 72vw);
    height: auto;
  }

  .hero{
    height: calc(100vh - var(--topbar-h));
    /* Mobil: görsel dikey ekranda alanı doldursun (blur/uzatma yok) */
    overflow: hidden;
    background-size: cover;
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-color: #0f0f0f;
  }
  /* v3'te eklenen blur dolgusunu mobilde kapatıyoruz */
  .hero::before{ display:none !important; }
  /* grid zaten z-index:1, ::after zaten overlay; burada sadece emin oluyoruz */
  .grid{ position:relative; z-index: 1; }

  /* Mobile: scroll hint geri gelsin ve patlamasın */
  .scroll-hint{
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content:center;
    gap: 10px;
    width: auto;
    max-width: 88vw;
    padding: 10px 12px;
    bottom: 14px;
    border-radius: 999px;
    background: rgba(12,12,12,.32);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
  }
  .scroll-hint span{
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align:center;
  }
  .scroll-hint .mouse{
    width: 22px;
    height: 34px;
    border-width: 2px;
  }
  .scroll-hint .wheel{
    width: 3px;
    height: 7px;
  }

  .projects{ padding: 72px 6%; }
  .projects-grid{ grid-template-columns: repeat(2, 1fr); }
  .projects-page-grid{ grid-template-columns: repeat(2, 1fr); }

    /* Mobile/tablet: project detail should open as a full-screen modal overlay */
  .project-reveal:not(.modal){
    position: fixed;
    inset: 10px;
    width: auto;
    height: calc(100svh - 20px);
    margin: 0;
    border-radius: calc(var(--radius) + 6px);
    z-index: 2000;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 42svh) 1fr;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  .project-reveal.open{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .project-reveal-close{
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
  }

  .project-reveal-media{ min-height: 0; }
  .pr-track .pr-slide{ object-fit: cover; }
  .project-reveal-body{
    border-left: 0;
    border-top: 1px solid rgba(20,20,20,.12);
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* Mobile: hover scale/pixel olaylarını söndür */
  .pr-track .pr-slide{ transform:none; }
  .project-card:hover,
  .pp-card:hover{ transform:none; box-shadow:none; }
  .project-card:hover img,
  .pp-card:hover img{ transform:none; }
  .project-card img,
  .pp-card img{ transform:none; }

  /* Next 3 strip inside modal */
  .pr-next-wrap{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(20,20,20,.10); }
  .pr-next-head{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .pr-next-grid{ display: grid; gap: 10px; }
  .pr-next-card{
    width: 100%;
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(20,20,20,.12);
    background: rgba(255,255,255,.72);
    cursor: pointer;
    text-align:left;
  }
  .pr-next-thumb{ width: 68px; height: 46px; border-radius: 12px; overflow:hidden; flex: none; background: rgba(0,0,0,.06); }
  .pr-next-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
  .pr-next-text{ display:flex; flex-direction:column; gap: 2px; flex: 1 1 auto; }
  .pr-next-meta{ font-size: 11px; color: var(--muted); letter-spacing: .06em; }
  .pr-next-title{ font-size: 14px; font-weight: 600; color: var(--text); }
  .pr-next-card i{ color: rgba(20,20,20,.55); }
  .about-hero{ padding: 80px 6% 54px; }
  .about-block{ padding: 64px 6%; }
  .about-grid{ grid-template-columns: 1fr; padding: 0 6% 64px; }
  .about-stats{ grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 54px 6%; }

  .contact-hero{ padding: 72px 6% 48px; }
  .contact-cards{ grid-template-columns: 1fr; padding: 56px 6%; }
  .contact-map{ grid-template-columns: 1fr; padding: 56px 6%; }

  .footer{ padding: 46px 6% 22px; }
  .footer-container{ grid-template-columns: 1fr; }

  .two-col{ grid-template-columns: 1fr; }
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .systems-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .faq{ grid-template-columns: 1fr; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }

}

@media (max-width: 768px){
  .grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }

  .grid-item:hover .overlay{ opacity:0; }
  .grid-item.active .overlay{ opacity:1; }

  .projects-grid{ grid-template-columns: 1fr; }
  .project-card img{ height: 210px; object-position: center; }

  .projects-page-grid{ grid-template-columns: 1fr; }
  .pp-card img{ height: 210px; object-position: center; }

  /* Dış Cephe: mobilde boxlar alt alta, ferah */
  .systems-grid{ grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 920px){
  .services{ grid-template-columns: 1fr; padding: 56px 6%; }
}


/* Mobile: parsellerde "dokun" rehberi (1. parsel + aktifken küçük ipucu) */

@keyframes clickNudge{
  0%,100%{ transform: translateY(0) scale(1); opacity:.82; }
  50%{ transform: translateY(-4px) scale(1.04); opacity:1; }
}
@keyframes tapPulse{
  0%{ transform: scale(.85); opacity:.35; }
  60%{ transform: scale(1.15); opacity:.85; }
  100%{ transform: scale(1.35); opacity:0; }
}
@keyframes hintNudge{
  0%,100%{ transform: translateY(0); opacity:.82; }
  50%{ transform: translateY(-3px); opacity:1; }
}

@media (max-width: 920px) and (hover: none) and (pointer: coarse){
  .grid-item:nth-child(4)::after{
    content:"";
    position:absolute;
    width: 34px;
    height: 34px;
    right: 12px;
    bottom: 12px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3Cpath%20fill%3D%22white%22%20d%3D%22M22%2010l28%2028-12%203%207%2015-7%203-7-15-9%209z%22%2F%3E%0A%3C%2Fsvg%3E") center/contain no-repeat;
    opacity:.92;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.38));
    animation: clickNudge 1.8s ease-in-out infinite;
    pointer-events:none;
    z-index: 2;
  }
}

/* Popup açılınca body scroll kilitle */
body.pr-open{
  overflow: hidden;
}