/* ==========================================================================
   Owl Ajans — tek sayfa
   Tasarım referansı: seeking.com mobil. Karakteristikleri:
     · tam ekran hero, içerik alta yaslı
     · tek aile, çok iri ve ağır sans başlık (serif yok)
     · beyaz zemin + tek güçlü vurgu rengi (CTA)
     · geniş bölüm boşlukları, ince çizgili sade kartlar
     · mobilde sabit alt CTA çubuğu
   MOBİL ÖNCELİKLİ yazıldı: temel kurallar telefon içindir, min-width ile büyür.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

:root{
  /* mürekkep */
  --ink:#141110;
  --ink-2:#4C4641;
  --ink-3:#7C746C;
  /* zemin */
  --kagit:#FFFFFF;
  --kagit-2:#F5F3F0;
  --gece:#0D0B0A;
  --cizgi:#E7E3DD;
  /* vurgu — seeking'in kırmızı CTA'sının karşılığı */
  --vurgu:#D2103A;
  --vurgu-koyu:#A20B2C;
  --vurgu-sis:#FDECEF;

  --kap:72rem;
  --yuvarlak:0.75rem;
  --gecis:180ms cubic-bezier(.4,0,.2,1);
}

body{
  margin:0;
  background:var(--kagit);
  color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1rem;
  line-height:1.62;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block }
a{ color:inherit }

/* --- başlıklar: tek aile, ağır, sıkı harf aralığı ------------------------ */
h1,h2,h3{
  margin:0;
  font-weight:800;
  letter-spacing:-.033em;
  line-height:1.08;
  text-wrap:balance;
}
h1{ font-size:clamp(2.45rem,9.2vw,4.4rem) }
h2{ font-size:clamp(1.95rem,6.6vw,3rem); line-height:1.12 }
h3{ font-size:1.1rem; font-weight:700; letter-spacing:-.018em; line-height:1.3 }
p{ margin:0 }

.kap{ width:100%; max-width:var(--kap); margin-inline:auto; padding-inline:1.35rem }
.dar{ max-width:44rem }

/* ==========================================================================
   Butonlar
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1.05rem 1.6rem;
  border:1px solid transparent; border-radius:var(--yuvarlak);
  font:inherit; font-weight:700; font-size:1rem; letter-spacing:-.012em;
  text-decoration:none; cursor:pointer;
  transition:background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.btn svg{ width:1.15em; height:1.15em; fill:currentColor; flex:none }
.btn:active{ transform:translateY(1px) }

.btn-ana{ background:var(--vurgu); color:#fff }
.btn-ana:hover{ background:var(--vurgu-koyu) }

.btn-cizgi{ background:transparent; color:var(--ink); border-color:var(--cizgi) }
.btn-cizgi:hover{ border-color:var(--ink-3) }

/* hero içi — koyu zemin üstünde */
.btn-cam{
  background:rgba(255,255,255,.13); color:#fff;
  border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-cam:hover{ background:rgba(255,255,255,.22) }

.btn-blok{ width:100% }

/* ==========================================================================
   Üst çubuk — ince, hero üstünde şeffaf, kaydırınca beyaz
   ========================================================================== */
.ust{
  position:fixed; inset:0 0 auto; z-index:60;
  transition:background var(--gecis), border-color var(--gecis);
  border-bottom:1px solid transparent;
}
.ust-ic{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:3.9rem }
.logo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.06rem; letter-spacing:-.03em;
  text-decoration:none; color:#fff;
  transition:color var(--gecis);
}
.logo svg{ width:1.55rem; height:1.55rem; fill:currentColor }
.ust .btn{ padding:.56rem .95rem; font-size:.87rem; border-radius:.55rem; gap:.4rem }
.ust .btn svg{ width:1.05em; height:1.05em }
@media (max-width:22.5rem){ .ust .btn{ font-size:.8rem; padding:.5rem .8rem } .logo{ font-size:.98rem } }

/* kaydırılmış hâl (JS 'kaydi' sınıfı ekler) */
.ust.kaydi{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--cizgi) }
.ust.kaydi .logo{ color:var(--ink) }

/* ==========================================================================
   HERO — tam ekran, içerik alta yaslı (seeking mobil imzası)
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:7rem 2.6rem;
  background:var(--gece);
  color:#fff;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  filter:saturate(.9) contrast(1.03) brightness(.95);
}
/* Okunabilirlik perdesi: alta doğru koyulaşan çift katman.
   Metin altta olduğu için ağırlık aşağıda. */
.hero-ortu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(13,11,10,.62) 0%,
      rgba(13,11,10,.34) 26%,
      rgba(13,11,10,.62) 62%,
      rgba(13,11,10,.93) 100%),
    linear-gradient(0deg, rgba(13,11,10,.30), rgba(13,11,10,.30));
}
.hero > .kap{ position:relative; z-index:2 }

.rozet{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:1.15rem;
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.rozet i{ width:.42rem; height:.42rem; border-radius:50%; background:var(--vurgu); flex:none }

.hero h1{ max-width:16ch }
.hero h1 em{ font-style:normal; color:#fff; box-shadow:inset 0 -.14em 0 var(--vurgu) }

.giris{
  margin-top:1.15rem; max-width:38ch;
  font-size:1.06rem; line-height:1.58; color:rgba(255,255,255,.87);
}

.eylemler{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.9rem }
.hero-not{ margin-top:.95rem; font-size:.85rem; color:rgba(255,255,255,.62) }


/* ==========================================================================
   Bölümler
   ========================================================================== */
section{ padding-block:4.6rem }
.acik{ background:var(--kagit-2) }
.koyu{ background:var(--gece); color:#fff }

.eyebrow{
  margin-bottom:.95rem;
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vurgu);
}
.koyu .eyebrow{ color:#FF8098 }

.lede{ margin-top:1.15rem; font-size:1.13rem; line-height:1.58; color:var(--ink-2) }
.koyu .lede{ color:rgba(255,255,255,.8) }

/* --- değerler ızgarası (seeking'in "core values" bölümü) ----------------- */
.degerler{ display:grid; grid-template-columns:1fr; gap:0; margin-top:2.6rem }
.deger{ padding-block:1.55rem; border-top:1px solid var(--cizgi); display:flex; gap:1rem }
.koyu .deger{ border-top-color:rgba(255,255,255,.14) }
.deger:last-child{ border-bottom:1px solid var(--cizgi) }
.koyu .deger:last-child{ border-bottom-color:rgba(255,255,255,.14) }
.deger > svg{
  width:1.5rem; height:1.5rem; flex:none; margin-top:.15rem;
  fill:none; stroke:var(--vurgu); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.koyu .deger > svg{ stroke:#FF8098 }
.deger h3{ margin-bottom:.35rem }
.deger p{ font-size:.97rem; color:var(--ink-2); line-height:1.55 }
.koyu .deger p{ color:rgba(255,255,255,.72) }



/* --- SSS ----------------------------------------------------------------- */
.sss{ margin-top:2.4rem; border-top:1px solid var(--cizgi) }
.sss details{ border-bottom:1px solid var(--cizgi) }
.sss summary{
  position:relative; display:block; cursor:pointer;
  padding:1.35rem 2.6rem 1.35rem 0;
  font-weight:700; font-size:1.03rem; letter-spacing:-.015em; line-height:1.4;
  list-style:none;
}
.sss summary::-webkit-details-marker{ display:none }
.sss summary::after{
  content:""; position:absolute; right:.35rem; top:1.72rem;
  width:.62rem; height:.62rem;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform var(--gecis);
}
.sss details[open] summary::after{ transform:rotate(-135deg); border-color:var(--vurgu) }
.sss .cevap{ padding:0 0 1.45rem }
.sss .cevap p{ color:var(--ink-2); font-size:.99rem }


/* ==========================================================================
   Alt bilgi
   ========================================================================== */
footer{ padding-block:3.4rem 7.5rem; background:var(--kagit-2); border-top:1px solid var(--cizgi) }
.alt-ic{ display:grid; grid-template-columns:1fr; gap:1.9rem }
.alt-ic strong{ display:block; margin-bottom:.5rem; font-weight:800; font-size:.94rem; letter-spacing:-.015em }
.alt-ic p{ font-size:.9rem; color:var(--ink-3); line-height:1.62 }
.alt-ic a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--cizgi) }
.alt-ic a:hover{ color:var(--vurgu); border-bottom-color:currentColor }
.alt-son{
  display:flex; flex-wrap:wrap; gap:.6rem 1.3rem;
  margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--cizgi);
  font-size:.83rem; color:var(--ink-3);
}
.alt-son a{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--cizgi) }
.alt-son a:hover{ color:var(--vurgu) }

/* ==========================================================================
   Sabit alt CTA çubuğu — mobil (seeking mobil imzası)
   ========================================================================== */
.sabit{
  position:fixed; inset:auto 0 0; z-index:70;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--cizgi);
  transform:translateY(110%); transition:transform 260ms cubic-bezier(.4,0,.2,1);
}
.sabit.gorun{ transform:translateY(0) }
.sabit .btn{ width:100%; padding:.95rem 1.4rem }

/* ==========================================================================
   Giriş animasyonu
   ========================================================================== */
.ac{ opacity:0; transform:translateY(14px); animation:gel .62s cubic-bezier(.22,1,.36,1) forwards }
.ac-2{ animation-delay:.07s } .ac-3{ animation-delay:.14s } .ac-4{ animation-delay:.21s }
@keyframes gel{ to{ opacity:1; transform:none } }

/* ==========================================================================
   Geniş ekran — mobil tasarımın ferah hâli
   ========================================================================== */
@media (min-width:40rem){
  .eylemler{ flex-direction:row; flex-wrap:wrap }
  .eylemler .btn{ min-width:14rem }
}
@media (min-width:64rem){
  section{ padding-block:6.4rem }
  .hero{ padding-block:8rem 4rem }
  .degerler{ grid-template-columns:repeat(2,1fr); column-gap:2.8rem }
  .deger:nth-last-child(2):not(:nth-child(even)){ border-bottom:1px solid var(--cizgi) }
  .alt-ic{ grid-template-columns:1.6fr 1fr 1.4fr; gap:2.6rem }
  footer{ padding-bottom:3.4rem }
  .sabit{ display:none }
}

/* ==========================================================================
   Erişilebilirlik / veri tasarrufu
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
  .ac{ opacity:1; transform:none }
  .hero-video{ display:none }
}
@media (prefers-reduced-data:reduce){ .hero-video{ display:none } }

:focus-visible{ outline:2px solid var(--vurgu); outline-offset:3px; border-radius:.3rem }
.ust.kaydi :focus-visible, section :focus-visible{ outline-color:var(--vurgu) }
.hero :focus-visible{ outline-color:#fff }