/* STYLE By CPawnProject - Rev. 20.10.26 */
:root {
  --sancak-red: #98182c;
  --sancak-red-dark: #7a1121;
  --sancak-ink: #111518;
  --sancak-paper: #f7f7f5;
  --sancak-text: #1e252b;
  --sancak-muted: #68727c;
}
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--sancak-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sancak-red); color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(152,24,44,.45); outline-offset: 4px; }

/* Header */
header {
  box-shadow: 0 4px 24px rgba(15, 20, 24, .045) !important;
  transition: box-shadow .25s ease, background .25s ease;
}
header nav a { transition: color .2s ease; }
header nav a:not(:first-child):hover { color: var(--sancak-red); }
header .max-w-7xl { min-height: 78px; }
header a[href="#iletisim"] { box-shadow: 0 8px 20px rgba(152,24,44,.17); }
header a[href="#iletisim"]:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(152,24,44,.24); }

/* Hero */
#anasayfa { min-height: min(690px, calc(100svh - 78px)); isolation: isolate; }
#anasayfa > .absolute:first-child img {
  transform: scale(1.035);
  animation: heroImageIn 1.4s cubic-bezier(.2,.7,.2,1) both;
}
#anasayfa h1 { max-width: 780px; text-wrap: balance; letter-spacing: -.045em; line-height: 1.08; }
#anasayfa h1 span { display: inline-block; text-shadow: 0 8px 35px rgba(152,24,44,.18); }
#anasayfa .hero-copy { max-width: 720px; }
#anasayfa .hero-copy > p { max-width: 570px; }
#anasayfa .hero-copy .bg-brand-red,
#urunler a.bg-brand-red { box-shadow: 0 12px 28px rgba(152,24,44,.22); }
#anasayfa .hero-copy .bg-brand-red:hover,
#urunler a.bg-brand-red:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(152,24,44,.3); }
#anasayfa .hero-copy .bg-white\/10:hover { border-color: rgba(255,255,255,.65); }

/* Fine red detail */
section h2 { text-wrap: balance; }
section[id] { scroll-margin-top: 84px; }
#urunler { background: linear-gradient(180deg, #fafafa 0%, #f3f4f4 100%); }
#urunler h2, #projeler h2 { letter-spacing: -.04em; }
#urunler .grid.grid-cols-1.sm\:grid-cols-2 { gap: 18px; }

/* Cards */
.card-container {
  border-radius: 15px !important;
  box-shadow: 0 10px 28px rgba(18, 24, 29, .10);
  transform: translateZ(0);
  transition: box-shadow .35s ease, transform .35s ease;
}
.card-container:hover {
  box-shadow: 0 22px 44px rgba(18, 24, 29, .20);
  transform: translateY(-5px);
}
.hover-zoom-img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.card-container:hover .hover-zoom-img { transform: scale(1.065); }
#urunler .card-container .absolute.inset-0 { padding: 24px; }
#urunler .card-container h3 { letter-spacing: -.025em; }
#urunler .card-container .rounded-full { transition: transform .25s ease, background .25s ease; }
#urunler .card-container:hover .rounded-full { transform: translateX(3px); }
#projeler { background: radial-gradient(ellipse at 80% 0%, #20262b 0%, #111518 48%, #0d1013 100%); }
#projeler .card-container { box-shadow: 0 18px 45px rgba(0,0,0,.24); }
#projeler .card-container:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: inherit;
  pointer-events: none;
}

/* Benefit bar */
.feature-wrap > .grid > div { transition: transform .25s ease; }
.feature-wrap > .grid > div:hover { transform: translateY(-3px); }
.feature-wrap > .grid > div > div:first-child {
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.feature-wrap > .grid > div:hover > div:first-child {
  background: var(--sancak-red);
  color: #fff;
  transform: rotate(-3deg);
}

/* CTA */
.cta-banner-bg {
  background: linear-gradient(115deg, #98182c 0%, #7a1121 62%, #5f101d 100%);
  position: relative;
  isolation: isolate;
}
.cta-banner-bg:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  z-index: -1;
  background-image: linear-gradient(135deg, transparent 48%, rgba(255,255,255,.25) 49%, transparent 50%);
  background-size: 18px 18px;
}
#hakkimizda .rounded-3xl { border: 1px solid rgba(255,255,255,.08); }
#hakkimizda img { transition: transform 1s ease; }
#hakkimizda .rounded-3xl:hover img { transform: scale(1.04); }

/* Footer */
footer { background: #0b0e10 !important; }
footer a { transition: color .2s ease, background .2s ease, transform .2s ease; }
footer .rounded-full:hover { transform: translateY(-2px); }

/* Scroll reveals, staggered */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.product-grid .reveal-on-scroll:nth-child(2) { transition-delay: .08s; }
.product-grid .reveal-on-scroll:nth-child(3) { transition-delay: .16s; }
.product-grid .reveal-on-scroll:nth-child(4) { transition-delay: .24s; }
.hero-copy { animation: heroTextIn .85s .12s both; }
@keyframes heroImageIn {
  from { transform: scale(1.09); filter: brightness(.32) contrast(1.1); }
  to { transform: scale(1.035); filter: brightness(.45) contrast(1.25); }
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes softFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
#anasayfa .animate-bounce { animation: softFloat 2.8s ease-in-out infinite; }

/* Better mobile rhythm */
@media (max-width: 767px) {
  header .max-w-7xl { min-height: 70px; }
  #anasayfa { min-height: 600px; }
  #anasayfa > .absolute:first-child img { object-position: 57% center; }
  #anasayfa h1 { font-size: clamp(2.35rem, 8vw, 3.6rem); line-height: 1.08; }
  #urunler, #projeler { padding-top: 4rem; padding-bottom: 4rem; }
  #urunler .card-container { min-height: 260px; }
  #projeler .card-container { min-height: 245px; }
  #hakkimizda .rounded-3xl { border-radius: 18px; }
  .reveal-on-scroll { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .reveal-on-scroll { opacity: 1; transform: none; }
}