:root{
  --bg:#0B1420;
  --bg-soft:#101C2C;
  --text:#F4EFE4;
  --muted:#AAA399;
  --gold:#D5A64C;
  --gold-2:#F0D38D;
  --line:rgba(213,166,76,.28);
  --max:1440px;
  --radius:21px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;

  user-select:none;
  -webkit-user-select:none;
}

a{
  color:inherit;
}

img{
  display:block;
  max-width:100%;
  -webkit-user-drag:none;
}

h1,
h2,
h3,
p{
  margin:0;
}

.shell{
  width:min(calc(100% - 42px), var(--max));
  margin-inline:auto;
}


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

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;

  background:
    linear-gradient(
      to bottom,
      rgba(11,20,32,.98),
      rgba(11,20,32,.82),
      rgba(11,20,32,.35),
      transparent
    );

  backdrop-filter:blur(10px);
}

.nav-inner{
  height:89px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid rgba(213,166,76,.12);
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;

  text-decoration:none;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:700;
}

.brand-mark{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid var(--gold);
  border-radius:50%;

  color:var(--gold-2);

  font-family:Georgia,serif;
  font-size:16px;
}

.menu{
  display:flex;
  align-items:center;
  gap:34px;
}

.menu a{
  position:relative;

  text-decoration:none;
  color:#D8D3CA;

  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;

  transition:.25s ease;
}

.menu a::after{
  content:"";

  position:absolute;

  left:0;
  right:100%;
  bottom:-8px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-2)
    );

  transition:.28s ease;
}

.menu a:hover{
  color:#fff;
}

.menu a:hover::after{
  right:0;
}


/* =========================
   HERO
   ========================= */

.hero{
  min-height:100svh;

  display:grid;
  align-items:center;

  padding-top:89px;

  position:relative;
  isolation:isolate;

  background:var(--bg);
}

.hero::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 73% 38%,
      rgba(213,166,76,.07),
      transparent 29%
    ),
    linear-gradient(
      90deg,
      rgba(11,20,32,.95) 0%,
      rgba(11,20,32,.83) 37%,
      rgba(11,20,32,.35) 70%,
      rgba(11,20,32,.70) 100%
    );

  z-index:-1;
}

.hero-grid{
  display:grid;

  grid-template-columns:
    38.2fr 61.8fr;

  min-height:
    calc(100svh - 89px);

  align-items:center;

  gap:34px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:13px;

  color:var(--gold-2);

  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;

  margin-bottom:21px;
}

.eyebrow::before{
  content:"";

  width:55px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}

h1{
  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(56px,7vw,112px);

  font-weight:500;

  line-height:.92;
  letter-spacing:-.045em;
}

.gold-text{
  background:
    linear-gradient(
      135deg,
      #8A5C16 0%,
      #F5DC9B 28%,
      #C99235 52%,
      #F7E6B2 75%,
      #956317 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.hero-copy p{
  margin-top:34px;

  max-width:540px;

  color:var(--muted);

  font-size:16px;
  line-height:1.75;
}

.hero-actions{
  margin-top:34px;

  display:flex;
  align-items:center;
  gap:21px;
}

.text-link{
  color:#DED7CC;

  text-decoration:none;

  font-size:13px;
  letter-spacing:.08em;

  border-bottom:
    1px solid var(--line);

  padding-bottom:8px;

  transition:.25s ease;
}

.text-link:hover{
  color:var(--gold-2);
  border-color:var(--gold);
}

.hero-art{
  position:relative;

  display:grid;
  place-items:center;

  min-height:620px;
}

.hero-art::before{
  content:"";

  position:absolute;

  width:min(58vw,760px);
  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(213,166,76,.10) 0 20%,
      transparent 52%
    ),
    repeating-radial-gradient(
      circle,
      transparent 0 88px,
      rgba(213,166,76,.07) 89px 90px
    );

  animation:
    halo 18s linear infinite;
}

@keyframes halo{
  to{
    transform:rotate(360deg);
  }
}

.hero-logo{
  width:min(48vw,680px);

  position:relative;
  z-index:2;

  filter:
    drop-shadow(
      0 25px 45px rgba(0,0,0,.35)
    );

  transform:translateY(14px);
}

.scroll-cue{
  position:absolute;

  left:50%;
  bottom:21px;

  transform:translateX(-50%);

  color:#8D877D;

  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;

  display:flex;
  align-items:center;
  gap:13px;
}

.scroll-cue::after{
  content:"";

  width:55px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--line),
      transparent
    );
}


/* =========================
   SECTIONS
   ========================= */

section{
  position:relative;
  padding:144px 0;
}

#hakkimizda,
#hizmetler,
#iletisim{
  background:var(--bg);
}

.section-head{
  display:grid;

  grid-template-columns:
    38.2fr 61.8fr;

  gap:34px;

  align-items:end;

  margin-bottom:55px;
}

.kicker{
  color:var(--gold-2);

  text-transform:uppercase;

  letter-spacing:.22em;

  font-size:11px;
}

h2{
  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-weight:500;

  font-size:
    clamp(40px,5vw,72px);

  line-height:1;
  letter-spacing:-.035em;

  max-width:860px;
}

.golden-rule{
  width:61.8%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );

  margin-top:34px;
}


/* =========================
   ABOUT
   ========================= */

.about-content{
  display:grid;

  grid-template-columns:
    38.2fr 61.8fr;

  gap:55px;

  align-items:start;
}

.about-content .lead{
  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(28px,3vw,42px);

  line-height:1.28;

  color:#F0E9DC;

  position:sticky;
  top:130px;
}

.about-text{
  color:var(--muted);

  font-size:16px;
  line-height:1.9;

  max-width:760px;
}

.about-text p{
  margin-bottom:34px;
}

.about-text strong{
  color:var(--gold-2);
  font-weight:600;
}

.about-emphasis{
  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(56px,7vw,100px);

  line-height:1;

  margin:
    34px 0 55px;

  background:
    linear-gradient(
      135deg,
      #8A5C16,
      #F5DC9B,
      #C99235,
      #F7E6B2,
      #956317
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.about-text blockquote{
  margin:55px 0;

  padding:34px;

  border-left:
    1px solid var(--gold);

  background:
    rgba(213,166,76,.035);

  color:#E8E0D4;

  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(22px,2.4vw,34px);

  line-height:1.5;
}

.signature-quote{
  margin:55px 0;

  padding:34px 0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(30px,4vw,54px);

  line-height:1.2;

  color:var(--gold-2);
}

.about-ending{
  margin-top:89px;
}

.about-ending > p{
  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(26px,3vw,40px);

  color:#EEE7DB;

  line-height:1.35;

  margin-bottom:13px;
}

.ending-brand{
  margin-top:55px;

  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:
    clamp(52px,6vw,88px);

  line-height:.95;

  color:var(--gold-2);
}

.ending-brand span{
  display:block;

  margin-top:13px;

  font-size:
    clamp(24px,3vw,42px);

  color:#E6DDCF;
}

.ending-brand small{
  display:block;

  margin-top:13px;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:12px;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:var(--muted);
}


/* =========================
   SERVICES
   ========================= */

.services{
  background:var(--bg);
}

.service-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:21px;
}

.card{
  position:relative;

  min-height:330px;

  padding:34px;

  border:
    1px solid rgba(213,166,76,.16);

  border-radius:var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.008)
    );

  overflow:hidden;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease;
}

.card::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  right:-72px;
  top:-72px;

  border:
    1px solid rgba(213,166,76,.18);

  border-radius:50%;
}

.card:hover{
  transform:translateY(-8px);

  border-color:
    rgba(213,166,76,.42);

  background:
    linear-gradient(
      145deg,
      rgba(213,166,76,.06),
      rgba(255,255,255,.01)
    );
}

.card h3{
  margin-top:34px;

  font-family:
    "Bodoni 72",
    "Didot",
    "Times New Roman",
    serif;

  font-size:34px;
  font-weight:500;
}

.card p{
  margin-top:21px;

  color:var(--muted);

  line-height:1.75;

  font-size:14px;
}


/* =========================
   CONTACT
   ========================= */

.contact-wrap{
  display:grid;

  grid-template-columns:
    61.8fr 38.2fr;

  gap:55px;

  align-items:start;

  padding:34px;

  border:
    1px solid var(--line);

  border-radius:34px;

  background:
    radial-gradient(
      circle at 84% 15%,
      rgba(213,166,76,.10),
      transparent 27%
    ),
    var(--bg-soft);
}


/* MAP */

.map-side{
  display:grid;

  grid-template-rows:
    1fr auto;

  gap:21px;

  height:100%;
}

.map-box{
  width:100%;
  height:390px;

  border-radius:21px;

  overflow:hidden;

  border:
    1px solid rgba(213,166,76,.18);

  background:var(--bg);
}

.map-frame{
  width:100%;
  height:100%;

  display:block;

  border:0;

  filter:
    brightness(.88)
    saturate(.78)
    contrast(1.08);
}

.map-side .btn{
  justify-self:start;
}


/* CONTACT RIGHT */

.contact-side{
  display:grid;

  grid-template-rows:
    auto
    auto
    auto
    auto
    auto;

  align-items:start;

  height:100%;

  gap:18px;
}


/* CONTACT TITLE + SOCIAL */

.contact-top-row{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:21px;
}

.contact-kicker{
  color:var(--gold-2);

  text-transform:uppercase;

  letter-spacing:.22em;

  font-size:18px;
  font-weight:600;

  margin-top:4px;
}


/* SOCIAL */

.social-links{
  display:flex;
  align-items:center;

  direction:rtl;

  gap:8px;
}

.social-link{
  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(213,166,76,.28);

  border-radius:50%;

  color:var(--gold-2);

  text-decoration:none;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.social-link svg{
  width:11px;
  height:11px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.social-link:hover{
  transform:translateY(-2px);

  color:#0B1420;

  border-color:var(--gold-2);

  background:
    linear-gradient(
      135deg,
      #B17B25,
      #F1D28B,
      #B27D27
    );
}


/* ADDRESS */

.address-block{
  width:100%;

  padding:22px 0;

  border-top:
    1px solid rgba(213,166,76,.12);

  border-bottom:
    1px solid rgba(213,166,76,.12);
}

.address-label{
  color:var(--gold-2);

  font-size:12px;

  letter-spacing:.18em;

  text-transform:uppercase;

  margin-bottom:13px;
}

.address-text{
  color:#E6DDCF;

  font-size:15px;

  line-height:1.8;
}


/* PHONE */

.phone-block{
  width:100%;

  padding:
    3px 0 18px;

  border-bottom:
    1px solid rgba(213,166,76,.12);

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:4px;
}

.phone-label{
  color:var(--gold-2);

  font-size:12px;

  letter-spacing:.18em;

  text-transform:uppercase;

  margin-bottom:8px;
}

.phone{
  display:block;

  color:#E6DDCF;

  text-decoration:none;

  font-size:18px;

  line-height:1.5;

  transition:.25s ease;
}

.phone:hover,
.mail:hover{
  color:var(--gold-2);
}


/* MAIL */

.mail{
  display:block;

  width:100%;

  color:var(--gold-2);

  text-decoration:none;

  font-size:
    clamp(16px,1.5vw,20px);

  padding-bottom:10px;

  border-bottom:
    1px solid var(--line);

  transition:.25s ease;
}


/* BUTTONS */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:55px;

  padding:0 34px;

  border-radius:999px;

  text-decoration:none;

  text-transform:uppercase;

  font-size:12px;

  letter-spacing:.14em;

  font-weight:700;

  transition:.25s ease;
}

.btn-primary{
  color:#080808;

  background:
    linear-gradient(
      135deg,
      #B17B25,
      #F1D28B,
      #B27D27
    );

  box-shadow:
    0 13px 34px rgba(177,123,37,.16);
}

.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

.contact-side .btn{
  justify-self:start;
}


/* =========================
   FOOTER
   ========================= */

footer{
  padding:
    34px 0 55px;

  color:#726D65;

  font-size:12px;

  background:var(--bg);
}

.footer-row{
  display:flex;

  justify-content:space-between;

  gap:21px;

  flex-wrap:wrap;

  border-top:
    1px solid rgba(255,255,255,.06);

  padding-top:34px;
}


/* =========================
   ANIMATION
   ========================= */

.reveal{
  opacity:0;

  transform:
    translateY(21px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* =========================
   TABLET
   ========================= */

@media(max-width:900px){

  .menu{
    gap:21px;
  }

  .menu a{
    font-size:11px;
  }

  .hero-grid,
  .section-head,
  .about-content,
  .contact-wrap{
    grid-template-columns:1fr;
  }

  .hero-copy{
    padding-top:55px;
  }

  .hero-art{
    min-height:500px;
  }

  .hero-logo{
    width:min(84vw,610px);
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .section-head{
    gap:21px;
  }

  .contact-wrap{
    gap:34px;
    padding:21px;
  }

  .about-content .lead{
    position:static;
  }

  .map-box{
    height:360px;
  }
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:640px){

  .shell{
    width:min(
      calc(100% - 26px),
      var(--max)
    );
  }

  .nav-inner{
    height:72px;
  }

  .brand span:last-child{
    display:none;
  }

  .menu{
    gap:13px;
  }

  .menu a{
    font-size:10px;
    letter-spacing:.04em;
  }

  .hero{
    padding-top:72px;
  }

  .hero-grid{
    min-height:
      calc(100svh - 72px);
  }

  h1{
    font-size:
      clamp(54px,18vw,84px);
  }

  .hero-art{
    min-height:390px;
  }

  .hero-logo{
    width:92vw;
  }

  section{
    padding:89px 0;
  }

  .scroll-cue{
    display:none;
  }

  .map-box{
    height:300px;
  }

  .map-side .btn,
  .contact-side .btn{
    width:100%;
  }

  .address-text{
    font-size:14px;
  }

  .phone{
    font-size:17px;
  }

  .contact-top-row{
    gap:13px;
  }

  .social-links{
    gap:6px;
  }

  .social-link{
    width:22px;
    height:22px;
  }

  .social-link svg{
    width:10px;
    height:10px;
  }
}


/* =========================
   REDUCED MOTION
   ========================= */

@media(prefers-reduced-motion:reduce){

  *{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }

}