/* ============================================================
   Me Interiors — Ortak Tasarım Sistemi
   Tüm sayfalar bu dosyayı çağırır. Bir yeri değiştirince hepsi güncellenir.
   ============================================================ */

:root{
  /* Renk paleti — devir özetiyle birebir */
  --bg:#F2EEE8;         /* ana arka plan */
  --secondary:#D7CEC1;  /* ikincil ton */
  --taupe:#B2A89A;      /* sıcak taupe */
  --wood:#43372F;       /* koyu ahşap */
  --ink:#1B1918;        /* metin */
  --contrast:#111111;   /* koyu bölümler */

  --line:rgba(27,25,24,.14);
  --line-dark:rgba(242,238,232,.16);

  /* Tipografi */
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(24px,5vw,88px);
  --maxw:1600px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--wood);color:var(--bg)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- Scroll progress ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--wood);z-index:100;transition:width .1s linear;
}

/* ---------- Navbar (hafif glass — Apple seviyesi) ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:90;
  padding:26px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .5s var(--ease),background .5s var(--ease),
             backdrop-filter .5s var(--ease),border-color .5s var(--ease),
             box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.nav.scrolled{
  padding:14px var(--gutter);
  background:rgba(242,238,232,.7);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
/* koyu zemin (hero) üzerindeyken açık renk metin */
.nav.on-dark:not(.scrolled){color:var(--bg)}
.nav.on-dark:not(.scrolled) .brand-sub{color:rgba(242,238,232,.55)}
.nav.on-dark:not(.scrolled) .nav-link{color:rgba(242,238,232,.85)}
.nav.on-dark:not(.scrolled) .nav-lang{color:rgba(242,238,232,.6)}
.nav.on-dark:not(.scrolled) .nav-cta{border-color:rgba(242,238,232,.4);color:var(--bg)}
.nav.on-dark:not(.scrolled) .nav-cta:hover{background:var(--bg);color:var(--ink)}

.brand{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand-mark{font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:.5px}
.brand-mark em{font-style:italic}
.brand-sub{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--taupe);font-weight:500}

.nav-menu{display:flex;align-items:center;gap:36px}
.nav-links{display:flex;gap:32px}
.nav-link{font-size:13px;letter-spacing:.3px;position:relative;padding:4px 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{opacity:1}

.nav-lang{font-size:12px;letter-spacing:1px;opacity:.7;display:flex;gap:6px;align-items:center}
.nav-lang .sep{opacity:.4}
.nav-lang a.off{opacity:.4;pointer-events:none}
.nav-cta{
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:11px 22px;border:1px solid var(--line);border-radius:100px;
  transition:all .4s var(--ease);
}
.nav-cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;color:inherit}
.burger span{width:24px;height:1.5px;background:currentColor;transition:.3s var(--ease)}

.mobile-menu{
  position:fixed;inset:0;z-index:95;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;
  transform:translateY(-100%);transition:transform .6s var(--ease);
}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:var(--serif);font-size:32px;font-weight:300}
.mobile-menu .m-lang{font-family:var(--sans);font-size:14px;letter-spacing:2px;margin-top:14px;opacity:.6}
.mobile-close{position:absolute;top:26px;right:var(--gutter);font-size:13px;letter-spacing:1px;background:none;border:none;cursor:pointer;text-transform:uppercase;color:inherit}

/* ---------- Genel tipografi yardımcıları ---------- */
.eyebrow{
  font-size:11px;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--taupe);font-weight:500;display:inline-flex;align-items:center;gap:16px;
}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor;opacity:.6}

.arrow-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  transition:gap .3s var(--ease);
}
.arrow-link:hover{gap:16px}
.arrow-link svg{width:14px;height:14px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}

/* ---------- Footer (ortak) ---------- */
.footer{
  background:var(--contrast);color:rgba(242,238,232,.7);
  padding:64px var(--gutter) 44px;
}
.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid var(--line-dark);
}
.footer-brand .brand-mark{color:var(--bg);font-size:30px}
.footer-brand p{margin-top:18px;max-width:280px;font-size:14px;color:rgba(242,238,232,.5);font-weight:300}
.footer-col h4{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--taupe);margin-bottom:18px;font-weight:500}
.footer-col a,.footer-col p{display:block;font-size:14px;color:rgba(242,238,232,.7);margin-bottom:11px;transition:color .3s var(--ease);font-weight:300}
.footer-col a:hover{color:var(--bg)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:32px;font-size:12.5px;letter-spacing:.4px;color:rgba(242,238,232,.5);
}
.footer-bottom .links{display:flex;gap:24px}
.footer-bottom a{transition:color .3s var(--ease)}
.footer-bottom a:hover{color:var(--bg)}

/* ---------- Placeholder görsel dolguları (gerçek render gelince değişecek) ----------
   Sıcak atmosfer: traverten / ahşap / pirinç / sıcak ışık */
.ph{position:absolute;inset:0}
.ph-warm1{background:radial-gradient(50% 60% at 55% 40%,rgba(224,180,120,.4),transparent 70%),linear-gradient(160deg,#3d332b,#1a1512)}
.ph-warm2{background:radial-gradient(55% 55% at 45% 45%,rgba(210,190,160,.35),transparent 70%),linear-gradient(150deg,#453a30,#181410)}
.ph-warm3{background:radial-gradient(50% 60% at 60% 50%,rgba(200,160,110,.38),transparent 70%),linear-gradient(170deg,#38302a,#14100d)}
.ph-warm4{background:radial-gradient(55% 50% at 50% 42%,rgba(220,175,120,.34),transparent 70%),linear-gradient(140deg,#413730,#171310)}
.ph-light{background:radial-gradient(60% 45% at 50% 40%,rgba(255,255,255,.5),transparent 70%),linear-gradient(160deg,#e8e1d6,#cabfad)}
.ph-note{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(242,238,232,.4);font-weight:500;
}
.ph-grain{
  position:absolute;inset:0;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Sayfa başlığı (iç sayfalar için ortak) ---------- */
.page-head{
  padding:calc(clamp(90px,14vh,150px) + 40px) var(--gutter) clamp(50px,8vh,90px);
  border-bottom:1px solid var(--line);
}
.page-head h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,7vw,92px);line-height:.98;letter-spacing:-.02em;margin-top:26px;
}
.page-head h1 em{font-style:italic}
.page-head .lede{margin-top:26px;max-width:520px;font-size:17px;color:#5a5148;font-weight:300}

/* ---------- Responsive (ortak) ---------- */
@media(max-width:1000px){
  .nav-links,.nav-lang{display:none}
  .burger{display:flex}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:640px){
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Pruva imzası ---------- */
.footer-credit{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dark);
  text-align:center;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;
}
.footer-credit a{color:rgba(242,238,232,.32);transition:color .4s var(--ease)}
.footer-credit a:hover{color:rgba(242,238,232,.8)}