/* Ulukat Tema · Temel · v0.1.0 */

/* ── TOKENS ── */
:root {
  --ul-gold: #C5A059;
  --ul-bronz: #B57B51;
  --ul-dark: #141210;
  --ul-bg: #121212;
  --ul-ink: #ffffff;
  --ul-ink-soft: #B0B0B0;

  --ul-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ul-serif: 'Lora', Georgia, serif;
  --ul-sans2: 'Raleway', 'Segoe UI', system-ui, sans-serif;
  --ul-fawn: #dba66e;
  --ul-ease: cubic-bezier(.2, .8, .2, 1);
  --ul-ease-cikis: cubic-bezier(.16, 1, .3, 1);
  --ul-ease-maske: cubic-bezier(.77, 0, .175, 1);
  --ul-gd: linear-gradient(-55deg, #9a5d3d 0%, #dba66e 51%, #9a5d3d 100%);

  --z-header: 100;
  --z-cerez: 150;
  --z-skip: 200;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ul-bg);
  color: var(--ul-ink);
  font-family: var(--ul-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }

@media (min-width: 1400px) {
  ::-webkit-scrollbar { width: 7px; background-color: #000; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--ul-bronz); border-radius: 0; }
}

.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: var(--z-skip);
  padding: 12px 18px; border-radius: 8px;
  background: var(--ul-gold); color: var(--ul-dark); font: 600 15px/1 var(--ul-font); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.ul-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── KAP ── */
.ul-kap { width: 100%; margin: 0 auto; padding: 0 12px; }
@media (min-width: 576px)  { .ul-kap { max-width: 564px; } }
@media (min-width: 768px)  { .ul-kap { max-width: 744px; } }
@media (min-width: 992px)  { .ul-kap { max-width: 984px; } }
@media (min-width: 1200px) { .ul-kap { max-width: 1194px; } }

/* ── TİPOGRAFİ ── */
.ul-ust {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  color: var(--ul-bronz); font: 700 24px/1.5 var(--ul-sans2);
}
.ul-ust-ikon { width: 33px; height: 31px; color: #fff; }
.ul-h2 {
  margin: 0 0 21px; color: #fff;
  font: 700 60px/1.166 var(--ul-serif);
}
@media (max-width: 1199px) { .ul-h2 { font-size: 55px; } }
@media (max-width: 991px)  { .ul-h2 { font-size: 45px; } }
@media (max-width: 767px)  { .ul-h2 { font-size: 35px; } .ul-ust { font-size: 20px; } }
@media (max-width: 575px)  { .ul-h2 { font-size: 30px; } }
.ul-p { margin: 0; color: #ccc; font: 500 18px/1.666 var(--ul-sans2); }

/* ── BUTON 3 ── */
.ul-btn3 {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 22px;
  padding: 11px 14px 11px 23px; border-radius: 23px; background: #333538; color: #fff; text-decoration: none;
  font: 700 17px/1.5 var(--ul-serif); transition: background-color .5s var(--ul-ease), color .5s var(--ul-ease);
}
.ul-btn3::after {
  content: ""; position: absolute; right: 5px; top: 50%; z-index: -1; width: 36.5px; height: 36.5px;
  transform: translateY(-50%); border-radius: 50%; background: var(--ul-bronz);
  transition: width .5s var(--ul-ease), height .5s var(--ul-ease), right .5s var(--ul-ease), border-radius .5s var(--ul-ease);
}
.ul-btn3:hover { color: #0c0c0c; }
.ul-btn3:hover::after { width: 100%; height: 100%; right: 0; border-radius: 23px; }
.ul-btn3-t { position: relative; overflow: hidden; display: inline-flex; line-height: 1.5; }
.ul-btn3-on,
.ul-btn3-arka { display: block; transition: transform 1s var(--ul-ease), opacity 1s var(--ul-ease); }
.ul-btn3-arka { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(100%); }
.ul-btn3:hover .ul-btn3-on { opacity: 0; transform: translateY(-100%); }
.ul-btn3:hover .ul-btn3-arka { opacity: 1; transform: none; }
.ul-btn3-ok { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; }
.ul-btn3-ok .ul-ikon { width: 17px; height: 17px; transition: transform 1s var(--ul-ease); }
.ul-btn3-ok .ul-ikon:nth-child(2) { position: absolute; transform: translateX(-20px); }
.ul-btn3:hover .ul-btn3-ok .ul-ikon:nth-child(1) { transform: translateX(20px); }
.ul-btn3:hover .ul-btn3-ok .ul-ikon:nth-child(2) { transform: none; }
.ul-btn3:focus-visible { outline: 2px solid var(--ul-gold); outline-offset: 3px; }

/* ── MOTION ── */
.ul-js [data-ul-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .5s var(--ul-ease), transform .5s var(--ul-ease); }
.ul-js [data-ul-reveal].is-in { opacity: 1; transform: none; }
.ul-satir3 { display: block; overflow: hidden; padding-bottom: 5px; }
.ul-satir3 + .ul-satir3 { margin-top: -5px; }
.ul-harf { display: inline-block; transform: translateY(150%); transition: transform .5s var(--ul-ease); }
.is-in .ul-harf { transform: none; }
.ul-js [data-ul-split]:not(.is-split) { visibility: hidden; animation: ul-goster 0s 2.5s forwards; }
@keyframes ul-goster { to { visibility: visible; } }

@media (prefers-reduced-motion: reduce) {
  .ul-js [data-ul-reveal] { opacity: 1; transform: none; }
}

/* ── LENIS ── */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}