/* ==========================================================================
   Antik Group İnşaat — tema katmanı (açık / aydınlık)
   Tailwind (CDN) üstüne binen özel animasyon ve efekt tanımları
   ========================================================================== */

:root {
  --paper: #faf8f5;
  --paper-alt: #f2eee8;
  --paper-card: #ffffff;
  --ink: #14161a;
  --ink-soft: #4a4f57;
  --ink-mute: #8a9099;
  --line: rgba(20, 22, 26, .10);
  --gold: #c8a45c;
  --gold-deep: #8a6b32;
  --gold-light: #e4cb94;
  --sand: #f6f3ee;
  --header-h: 96px;
}

/* Tailwind yardimci siniflari [hidden] ozniteligini ezebiliyor */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background-color: var(--paper);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--gold);
  color: #14161a;
}

/* Scrollbar ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb { background: #d6cfc3; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Tipografi yardımcıları ---------------------------------------------------- */
.text-gold-gradient {
  background: linear-gradient(100deg, #8a6b32 0%, #c8a45c 48%, #9a7b3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gold-gradient-on-dark {
  background: linear-gradient(100deg, #9a7b3c 0%, #e4cb94 45%, #c8a45c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rule-gold::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* Preloader ---------------------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-bar {
  width: 160px;
  height: 2px;
  background: #e3ddd2;
  overflow: hidden;
}
.preloader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: preload 1.1s ease-in-out infinite;
}
@keyframes preload {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Header ------------------------------------------------------------------- */
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 20, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200, 164, 92, .18);
  transition: background .5s ease, border-color .5s ease;
}
#header.is-stuck::before {
  background: rgba(15, 17, 20, .97);
  border-bottom-color: rgba(246, 243, 238, .09);
}
#header > * { position: relative; }

.header-bar { transition: height .5s ease; }
.header-bar img { transition: height .5s ease; }
#header.is-stuck .header-bar { height: 76px; }
#header.is-stuck .header-bar img { height: 2.6rem; }

/* Hero slider -------------------------------------------------------------- */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.slide.is-active { opacity: 1; }
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center var(--pos, 40%);
  transform: scale(1.03);
}
.slide.is-active .slide-bg {
  animation: kenburns 11s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.01); }
  to   { transform: scale(1.07); }
}

/* Hero'nun sol tarafını kağıt rengine yumuşatan perde */
.hero-veil {
  background:
    linear-gradient(96deg,
      var(--ink) 0%,
      rgba(20, 22, 26, .92) 24%,
      rgba(20, 22, 26, .72) 38%,
      rgba(20, 22, 26, .40) 54%,
      rgba(20, 22, 26, .14) 70%,
      rgba(20, 22, 26, 0) 84%);
}
/* Ustte navbar'a, altta bir sonraki acik bolume yumusak gecis */
.hero-fade {
  background: linear-gradient(to bottom, rgba(20, 22, 26, .45) 0%, transparent 20%, transparent 70%, rgba(20, 22, 26, .78) 100%);
}
@media (max-width: 1023px) {
  .hero-veil {
    background: linear-gradient(to bottom, rgba(20, 22, 26, .90) 0%, rgba(20, 22, 26, .76) 52%, rgba(20, 22, 26, .60) 100%);
  }
}

.slider-dot {
  position: relative;
  width: 34px;
  height: 2px;
  background: rgba(246, 243, 238, .28);
  overflow: hidden;
  transition: width .4s ease;
}
.slider-dot.is-active { width: 64px; background: rgba(246, 243, 238, .16); }
.slider-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.slider-dot.is-active::after { animation: dotFill 7s linear forwards; }
@keyframes dotFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Scroll ipucu ------------------------------------------------------------- */
@keyframes scrollHint {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.scroll-line span { animation: scrollHint 2.2s ease-in-out infinite; }

/* Reveal ------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .slide.is-active .slide-bg { animation: none; }
  .slider-dot.is-active::after { animation: none; transform: scaleX(1); }
  .scroll-line span { animation: none; }
}

/* Proje kartı -------------------------------------------------------------- */
.project-card {
  box-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 12px 30px -18px rgba(20, 22, 26, .28);
  transition: box-shadow .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(20, 22, 26, .06), 0 26px 46px -22px rgba(20, 22, 26, .38);
}
.project-card img {
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}
.project-card:hover img {
  transform: scale(1.08);
  filter: brightness(1) saturate(1.05);
}
/* Fotoğrafın üstündeki yazılar için koyu perde — açık temada da kalır */
.project-card .card-veil {
  background: linear-gradient(to top,
    rgba(14, 15, 18, .93) 0%,
    rgba(14, 15, 18, .74) 18%,
    rgba(14, 15, 18, .34) 40%,
    rgba(14, 15, 18, .06) 62%,
    rgba(14, 15, 18, 0) 100%);
}
.project-card.is-hidden { display: none; }

/* Filtre butonları --------------------------------------------------------- */
.filter-btn { position: relative; }
.filter-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.filter-btn.is-active::after,
.filter-btn:hover::after { transform: scaleX(1); transform-origin: left; }

/* Menü linkleri ------------------------------------------------------------ */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }

/* Dropdown ----------------------------------------------------------------- */
.has-dropdown > .dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobil menü --------------------------------------------------------------- */
#mobileMenu {
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
#mobileMenu.is-open { transform: translateX(0); }

.burger span {
  display: block;
  height: 1.5px;
  background: var(--sand);
  transition: transform .4s ease, opacity .3s ease, width .4s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; }

/* Butonlar ----------------------------------------------------------------- */
.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #9a7b3c, #c8a45c 55%, #e4cb94);
  color: #14161a;
  box-shadow: 0 10px 26px -14px rgba(154, 123, 60, .75);
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #e4cb94, #c8a45c 55%, #9a7b3c);
  opacity: 0;
  transition: opacity .45s ease;
}
.btn-gold:hover::after { opacity: 1; }
.btn-gold > * { position: relative; z-index: 1; }

.btn-ghost {
  border: 1px solid rgba(20, 22, 26, .22);
  color: var(--ink);
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(200, 164, 92, .12);
  color: var(--gold-deep);
}

/* Donatı etiketleri -------------------------------------------------------- */
.chip {
  border: 1px solid var(--line);
  background: var(--paper-card);
  transition: border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.chip:hover {
  border-color: rgba(200, 164, 92, .7);
  background: rgba(200, 164, 92, .10);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(20, 22, 26, .4);
}

/* Form --------------------------------------------------------------------- */
.field {
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid rgba(20, 22, 26, .16);
  transition: border-color .35s ease;
}
.field:focus {
  outline: none;
  border-color: var(--gold);
}
.field::placeholder { color: rgba(20, 22, 26, .32); }

/* Kart gölgesi ------------------------------------------------------------- */
.card-soft {
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 24px 48px -32px rgba(20, 22, 26, .35);
}

/* Scroll-top --------------------------------------------------------------- */
#scrollTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
#scrollTop.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Video lightbox ----------------------------------------------------------- */
#videoModal {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
#videoModal.is-open { opacity: 1; visibility: visible; }

/* Dokusal arka plan ızgarası ----------------------------------------------- */
.grid-lines {
  background-image:
    linear-gradient(rgba(20, 22, 26, .042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 26, .042) 1px, transparent 1px);
  background-size: 68px 68px;
}

/* Koyu bölüm varyantları ---------------------------------------------------- */
.grid-lines-dark {
  background-image:
    linear-gradient(rgba(246, 243, 238, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 243, 238, .045) 1px, transparent 1px);
  background-size: 68px 68px;
}

.chip-dark {
  border: 1px solid rgba(246, 243, 238, .13);
  background: rgba(246, 243, 238, .03);
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.chip-dark:hover {
  border-color: rgba(200, 164, 92, .6);
  background: rgba(200, 164, 92, .10);
  transform: translateY(-2px);
}

.btn-ghost-dark {
  border: 1px solid rgba(246, 243, 238, .25);
  color: var(--sand);
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.btn-ghost-dark:hover {
  border-color: var(--gold);
  background: rgba(200, 164, 92, .10);
  color: var(--gold-light);
}