/* Ulukat Tema · Ortak bölümler · v0.1.0 */

/* ── HAKKIMIZDA ── */
.uab { position: relative; overflow: hidden; isolation: isolate; padding: 135px 0 125px; }
.uab-isik {
  position: absolute; top: 0; left: 0; z-index: -1; width: 46%; height: 100%;
  background: radial-gradient(95% 75% at 0% 0%, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 42%, transparent 72%);
}

.uab-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; }
.uab-bas { margin-bottom: 30px; }
.uab-metin { margin: 0; color: #ccc; font: 500 18px/1.666 var(--ul-sans2); }

.uab-alinti { display: flex; gap: 20px; margin: 0 0 40px; min-height: 60px; }
.uab-alinti-ikon { display: block; color: var(--ul-fawn); line-height: 0; }
.uab-alinti-ikon .ul-ikon { width: 60px; height: 60px; }
.uab-alinti-cizgi { width: 2px; background: #606060; opacity: .16; }
.uab-alinti-metin { margin: 0; align-self: center; }
.uab-alinti-metin p { margin: 0; color: #fff; font: 500 20px/1.5 var(--ul-sans2); }

.uab-sag { display: grid; grid-template-columns: 1.1fr 1fr; }
.uab-kartlar { list-style: none; margin: 0; padding: 0; }
.uab-kart {
  display: flex; gap: 20px; padding: 30px 20px 30px 0; background: #454545;
  box-shadow: -1.042px 5.909px 21px 0 rgba(94, 94, 94, .2);
  transition: background-color .7s var(--ul-ease), box-shadow .7s var(--ul-ease), opacity .5s var(--ul-ease), transform .5s var(--ul-ease);
}
.ul-js .uab-kart[data-ul-reveal] {
  transition: background-color .7s var(--ul-ease), box-shadow .7s var(--ul-ease), opacity .5s var(--ul-ease), transform .5s var(--ul-ease);
}
.uab-kart:nth-child(1) { position: relative; z-index: 1; }
.uab-kart:nth-child(2) { background: #212020; }
.uab-kart-ikon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 67px; height: 67px; margin-left: -34px; border-radius: 50%;
  background: var(--ul-bronz); color: #fff; box-shadow: -1.042px 5.909px 13px 0 rgba(0, 0, 0, .3);
  transition: background-color .7s var(--ul-ease), color .7s var(--ul-ease);
}
.uab-kart-ikon .ul-ikon { width: 38px; height: 38px; }
.uab-kart-baslik { margin: 0 0 10px; color: #fff; font: 700 30px/1.166 var(--ul-serif); transition: transform .7s var(--ul-ease); }
.uab-kart-metin { margin: 0; color: #ccc; opacity: .7; font: 500 16px/26px var(--ul-sans2); transition: color .5s var(--ul-ease); }
.uab-kart.is-active { background: var(--ul-bronz); box-shadow: -1.042px 5.909px 21px 0 rgba(94, 94, 94, 0); }
.uab-kart.is-active .uab-kart-ikon { background: #fff; color: var(--ul-bronz); }
.uab-kart.is-active .uab-kart-baslik:hover { transform: translateX(5px); }
.uab-kart.is-active .uab-kart-metin { color: #0c0c0c; opacity: 1; }
.uab-kart.is-active .uab-kart-baslik { color: #0c0c0c; }

.uab-gorsel-kap { position: relative; }
.uab-gorsel { height: 442px; overflow: hidden; filter: grayscale(1); }
.uab-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uab-gorsel--logo { display: flex; align-items: center; justify-content: center; padding: 32px 18px 100px; background: #000; }
.uab-gorsel--logo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.uab-sosyal { position: relative; z-index: 1; max-width: 243px; margin-top: -75px; padding: 29px 40px; background: rgba(80, 80, 80, .84); }
.uab-sosyal-baslik { margin: 17px 0 5px; color: #ccc; font: 700 16px/1.666 var(--ul-sans2); text-transform: uppercase; }
.uab-sosyal-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.uab-sosyal-liste a {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 2px solid #0c0c0c; border-radius: 5px; background: #0c0c0c; color: #fff;
  transition: background-color .5s var(--ul-ease);
}
.uab-sosyal-liste a::before { content: ""; position: absolute; inset: -7px; }
.uab-sosyal-liste li { position: relative; }
.uab-sosyal-liste .ul-ikon { width: 15px; height: 15px; }
.uab-sosyal-liste a:hover { background: var(--ul-bronz); }
.uab-sosyal-liste a:focus-visible { outline: 2px solid var(--ul-gold); outline-offset: 2px; }
.uab-kare { position: absolute; z-index: -1; }
.uab-kare-1 { bottom: 60px; right: 10px; width: 40px; height: 40px; background: var(--ul-bronz); animation: uab-kare1 6s linear infinite; }
.uab-kare-2 { bottom: 30px; right: -21px; width: 30px; height: 30px; background: var(--ul-fawn); animation: uab-kare2 6s linear infinite; }
@keyframes uab-kare1 { 50% { transform: translate(40px, 40px); } }
@keyframes uab-kare2 { 50% { transform: translate(-30px, -30px); } }

@media (max-width: 1199px) {
  .uab-grid { grid-template-columns: 1fr; }
  .uab-sol { max-width: 650px; }
  .uab-kartlar { padding-left: 20px; }
}
@media (max-width: 767px) {
  .uab-sag { grid-template-columns: 1fr; }
  .uab-kartlar { padding-left: 30px; }
  .uab-kart-baslik { font-size: 24px; }
}

/* ── SAYAÇLAR ── */
.usy { position: relative; z-index: 1; margin-top: -270px; padding-top: 50px; }
.usy-kutu {
  position: relative; padding: 90px 0 80px; border-radius: 30px;
  background: #1a1a1a center / cover no-repeat;
}
.usy-liste { list-style: none; margin: 0; padding: 0 0 15px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 55px; }
.usy-oge { text-align: center; padding: 22px 15px; border: 2px solid rgba(255, 255, 255, .26); }
.usy-sayi { margin: 0 0 14px; color: #fff; font: 600 72px/1 var(--ul-serif); }
.usy-etiket { margin: 0; color: #ccc; font: 500 20px/1.666 var(--ul-sans2); }
.usy-serit {
  position: absolute; bottom: -18px; left: 0; right: 0; z-index: -1; width: 90%; height: 18px; margin: 0 auto;
  background: var(--ul-gd); transform-origin: 50% 50%;
}
.ul-js .usy-serit { transform: scaleX(0); }

@media (min-width: 1600px) { .usy-kutu { margin: 0 -140px; } }
@media (min-width: 1400px) and (max-width: 1599px) { .usy-kutu { margin: 0 -80px; } }
@media (max-width: 1199px) { .usy-liste { gap: 15px; } .usy-sayi { font-size: 52px; } }
@media (max-width: 991px)  { .usy-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .usy-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .usy-liste { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .uab-kare { animation: none; }
  .ul-js .usy-serit { transform: none; }
}

/* ── HİZMET KARTI ── */
.uhl-kart { position: relative; display: flex; flex-direction: column; height: 100%; background: #111; border: 1px solid rgba(255, 255, 255, .07); transition: border-color .5s var(--ul-ease), background-color .5s var(--ul-ease); }
.uhl-gorsel { position: relative; aspect-ratio: 16 / 10; }
.uhl-gorsel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.8); transition: filter .8s var(--ul-ease), clip-path .8s var(--ul-ease-cikis); clip-path: inset(0); }
.uhl-ikon {
  position: absolute; z-index: 1; left: 24px; bottom: -28px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ul-bronz); color: #fff; box-shadow: 0 0 0 6px #111; transition: transform .6s var(--ul-ease-cikis), box-shadow .5s var(--ul-ease);
}
.uhl-ikon .ul-ikon { width: 28px; height: 28px; }
.uhl-yazi { display: flex; flex-direction: column; flex: 1 1 auto; padding: 44px 24px 26px; }
.uhl-ad { margin: 0 0 12px; font: 700 24px/1.3 var(--ul-serif); }
.uhl-link { color: #fff; text-decoration: none; transition: color .4s var(--ul-ease); }
.uhl-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.uhl-ozet { margin: 0 0 22px; color: #b5b5b5; font: 500 15px/1.65 var(--ul-sans2); }
.uhl-devam { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--ul-fawn); font: 700 15px/1 var(--ul-sans2); }
.uhl-devam .ul-ikon { width: 15px; height: 15px; transition: transform .45s var(--ul-ease-cikis); }
.uhl-kart:hover { border-color: rgba(181, 123, 81, .5); background: #14110e; }
.uhl-kart:hover .uhl-gorsel img { filter: none; clip-path: inset(8px 8px 0 8px); }
.uhl-kart:hover .uhl-ikon { transform: translateY(-6px) rotate(-6deg); box-shadow: 0 0 0 6px #14110e; }
.uhl-kart:hover .uhl-link { color: var(--ul-fawn); }
.uhl-kart:hover .uhl-devam .ul-ikon { transform: translateX(5px); }
.uhl-kart:focus-within { outline: 2px solid var(--ul-gold); outline-offset: 3px; }
.uhl-link:focus-visible { outline: none; }
.uhl-kart--kisa .uhl-gorsel { aspect-ratio: 4 / 3; }
.uhl-kart--kisa .uhl-yazi { padding: 42px 22px 24px; }
.uhl-kart--kisa .uhl-ad { margin-bottom: 18px; font-size: 22px; }
@media (max-width: 1199px) { .uhl-ad { font-size: 22px; } }

/* ── YAZI KARTI ── */
.uyk-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.ul-js .uyk-liste > li[data-ul-reveal] { transition: opacity .9s var(--ul-ease-cikis), transform .9s var(--ul-ease-cikis); transition-delay: calc(var(--i, 0) * 110ms); }
.uyk { position: relative; display: flex; flex-direction: column; height: 100%; background: #111; border: 1px solid rgba(255, 255, 255, .07); transition: border-color .5s var(--ul-ease), background-color .5s var(--ul-ease); }
.uyk-gorsel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #171717; }
.uyk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); transition: transform .9s var(--ul-ease-cikis), filter .6s var(--ul-ease); }
.uyk-bos { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ul-bronz); }
.uyk-bos .ul-ikon { width: 56px; height: 56px; opacity: .6; }
.uyk-yazi { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 24px 26px; }
.uyk-ust { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; color: #a3a3a3; font: 600 13px/1.4 var(--ul-sans2); }
.uyk-ust span { color: var(--ul-fawn); }
.uyk-baslik { margin: 0 0 12px; font: 700 21px/1.35 var(--ul-serif); }
.uyk-link { color: #fff; text-decoration: none; transition: color .4s var(--ul-ease); }
.uyk-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.uyk-link:focus-visible { outline: none; }
.uyk:focus-within { outline: 2px solid var(--ul-gold); outline-offset: 3px; }
.uyk-ozet { margin: 0 0 20px; color: #b5b5b5; font: 500 15px/1.65 var(--ul-sans2); }
.uyk-devam { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--ul-fawn); font: 700 15px/1 var(--ul-sans2); }
.uyk-devam .ul-ikon { width: 15px; height: 15px; transition: transform .45s var(--ul-ease-cikis); }
.uyk:hover { border-color: rgba(181, 123, 81, .5); background: #14110e; }
.uyk:hover .uyk-gorsel img { transform: scale(1.05); filter: none; }
.uyk:hover .uyk-link { color: var(--ul-fawn); }
.uyk:hover .uyk-devam .ul-ikon { transform: translateX(5px); }
@media (max-width: 991px) { .uyk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) { .uyk-liste { grid-template-columns: 1fr; } }