/* ============================================================
   aklar — 2026 tasarım bütünlüğü düzeltmeleri
   Ortak ürün yüzeyi: ana sayfa, liste, detay ve hesap ekranları.
   Bu dosya bilerek en son yüklenir; eski sayfa-özel sapmaları tek
   bir erişilebilir, responsive sistemde toplar.
   ============================================================ */

body{
  min-height:100vh;
  background:var(--paper);
  color:var(--ink-2);
}
h1,h2,h3,.pagehead h1{font-family:var(--display)}
.wrap{width:100%}

/* navigasyon */
.hdr{background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(14px)}
.hdr.is-stuck{box-shadow:0 8px 24px rgba(16,33,61,.07)}
.hdr-main{height:var(--nav-h)}
.brand img{height:30px}
.hdr-search input{border-color:var(--line);background:#fff}
.hdr-search button{background:var(--navy)}
.cats{background:#fff}
.cats-row{min-height:44px;align-items:center}

/* ortak etkileşim dili */
.btn{min-height:44px;border-radius:var(--r);font-weight:700}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-go{background:var(--green)}
.btn-ghost{background:#fff}
.inp,.searchrow form,.authcard,.panelcard,.tablecard,.filters,.side,
.actioncard,.qalist,.rows-view,.appcard,.mail,.modal .modal-card{
  border-color:var(--line);
  border-radius:var(--r-lg);
}
.inp:focus,.searchrow form:focus-within{
  border-color:var(--navy-2);
  box-shadow:0 0 0 4px rgba(36,87,230,.11);
}

/* iç sayfalarda başlık ve içerik ritmi */
.pagehead{padding:42px 0 28px}
.pagehead h1{font-size:clamp(30px,3.4vw,46px);line-height:1.04;color:var(--ink)}
.pagehead .lede{font-size:16px;line-height:1.65}
.crumbs{margin-bottom:16px}
.layout{gap:28px}
.filters,.side,.actioncard{box-shadow:0 10px 30px rgba(16,33,61,.05)}
.filters-head{padding:18px 20px}
.resbar{padding-top:6px}
.empty,.error{border-radius:var(--r-lg)}
.error{background:#fff8f7}

/* kartlar: aynı köşe, daha sakin gölge, klavye odağı */
.card,.jcard,.quote,.stat,.rolecard,.pathcard,.nudge{
  border-radius:var(--r-lg);
}
.card,.jcard,.quote,.appcard{box-shadow:0 4px 18px rgba(16,33,61,.045)}
.card:hover,.jcard:hover{box-shadow:0 16px 34px rgba(16,33,61,.10)}
.card:focus-within,.jcard:focus-within{outline:3px solid rgba(36,87,230,.24);outline-offset:2px}

/* ana sayfa — daha sıkı, daha dengeli ve tablet kırılımında kopmayan hero */
.home-v2 .wrap{max-width:1360px;padding-left:32px;padding-right:32px}
.home-v2 .home-section{padding:70px 0}
/* !important YOK, bilerek: home.js üç kipi de ölçüp en uzununu .hero-in'in
   inline min-height'ına yazıyor ve sekme değişince hero zıplamasın diye
   orayı kilitliyor. !important o inline ölçüyü eziyordu, yani koddaki
   çözüm sessizce devre dışı kalmıştı. Buradaki değer yalnızca JS henüz
   ölçmeden önceki tabanı veriyor. */
.home-v2 .home-hero .hero-in{min-height:548px}
.home-v2 .home-hero h1{font-size:clamp(44px,5vw,68px);max-width:11.5ch}
.home-v2 .home-hero h1 em{color:#dce8ff}
.home-v2 .home-hero h1 em::after{display:none}
.home-v2 .hero-copy{padding-top:38px;padding-bottom:38px}

/* Çip satırı: arama çubuğunun altında, onunla aynı genişlikte ve tek
   satır. space-between ilk çipi çubuğun soluna, son çipi sağına
   yaslıyor; satıra kaçının sığdığına home.js'teki cipleriSigdir karar
   veriyor. Etiket ("Sık aranan:") kaldırıldığı için ilk çip doğrudan
   çubuğun sol kenarından başlıyor. */
.home-v2 .hero-copy .chips{flex-wrap:nowrap;justify-content:space-between}
/* Çipler daralmasın: flex varsayılanı onları sıkıştırıp metni içeriden
   satır kırdırıyor, hem boyları hem satırı bozuluyordu. Kendi doğal
   genişliklerinde kalınca cipleriSigdir doğru ölçüyor ve fazlasını
   gizliyor. */
.home-v2 .hero-copy .chips .chip{flex:0 0 auto;white-space:nowrap}
.home-v2 .searchbar{min-height:66px}
.home-v2 .hero-media,.home-v2 .home-agency .agency{border-radius:0 0 0 18px}
.home-v2 .home-agency .agency{border-radius:24px}
.home-v2 .profile-grid .card,.home-v2 .jcard,.home-v2 .counsel-grid .card{
  border-radius:var(--r-lg);
}
.home-v2 .final-cta{background:var(--home-blue-deep)}

@media (min-width:941px){
  .home-v2 .hero-media{margin-right:calc((100vw - min(100vw,1360px))/ -2 - 32px)}
}

@media (max-width:940px){
  /* Burada da !important yok: JS'in ölçtüğü inline min-height kazanmalı.
     Bu kural yalnızca masaüstü tabanını (548px) dar ekranda iptal ediyor. */
  .home-v2 .home-hero .hero-in{grid-template-columns:minmax(0,1fr);min-height:0}
  .home-v2 .hero-copy{padding:40px 0 32px}
  .home-v2 .home-hero h1{max-width:12ch;margin-top:20px}
  .home-v2 .hero-media{min-height:320px;border-radius:16px 16px 0 0;margin-top:0}
  .home-v2 .hero-media>img{object-position:50% 48%}
  .home-v2 .hero-photo-lockup{left:18px;top:18px}
  .home-v2 .match-note-top{top:12%;right:8%}
}

@media (max-width:700px){
  :root{--nav-h:66px}
  .home-v2 .wrap,.wrap{padding-left:18px;padding-right:18px}
  .pagehead{padding:30px 0 22px}
  .pagehead h1{font-size:31px}
  .home-v2 .home-section{padding:52px 0}
  .home-v2 .mode{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .home-v2 .mode button{min-height:48px;padding:8px 6px;border:0;font-size:12px;line-height:1.2;white-space:normal}
  .home-v2 .home-hero h1{font-size:clamp(38px,12vw,48px);letter-spacing:-.055em}
  .home-v2 .searchbar{min-height:60px}
  .home-v2 .hero-media{min-height:286px;margin-left:-18px;margin-right:-18px;border-radius:0}
  .home-v2 .hero-photo-lockup{left:18px;top:18px;padding:12px 14px 11px}
  .home-v2 .hero-photo-brand .marka-yazi{font-size:25px}
  .home-v2 .hero-photo-lockup>span{font-size:11px;max-width:19ch}
  .home-v2 .match-note-top{right:18px;top:108px}
  .home-v2 .hero-references{left:18px;right:18px}
  .home-v2 .home-title-row h2,.home-v2 .featured-heading h2{font-size:32px}
}

@media (max-width:560px){
  .hdr-main{height:auto;min-height:66px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
  .hdr-search{order:3;flex-basis:100%;max-width:none}
  .hdr-search input{height:42px}
  .cats-row{min-height:42px}
  .pagehead .lede{font-size:15px}
  .authcard{padding:26px 22px}
  .home-v2 .brand img{height:29px}
  .home-v2 .searchbar{display:grid;grid-template-columns:44px minmax(0,1fr);padding:6px}
  .home-v2 .searchbar button{grid-column:1/-1;min-height:46px;margin-top:4px}
  .home-v2 .home-hero .lede{line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  .card,.jcard{transform:none!important}
}

/* ============================================================
   marka — iki o kırpılır, ardından looking harf harf kurulur
   ============================================================
   İlk karede yalnızca o biçimli iki işaret vardır. İç noktalar aşağıda
   durduğu için işaretler doğrudan göz illüstrasyonu değil, hareketli bir
   tipografik detay gibi okunur. Renk currentColor'dır. */

.brand{position:relative;display:inline-flex;align-items:center;color:var(--home-ink,#10213d)}
.marka{position:relative;display:inline-flex;align-items:center;height:40px}

.marka-yazi{
  display:inline-flex;align-items:center;
  font-family:var(--display);font-weight:700;font-size:31px;
  letter-spacing:-.055em;line-height:1
}
.marka-yazi i{font-style:normal}

/* Logodaki iki sade o. */
.mo{
  position:relative;top:.09em;
  width:.63em;height:.63em;margin:0 .008em;flex:0 0 auto;overflow:visible
}
.mo-halka{fill:none;stroke:currentColor;stroke-width:3.5}
.mo-bebek{fill:currentColor;transform-box:fill-box;transform-origin:center}

/* İki o'nun altındaki mavi gülümseme.
   Sarmal yalnızca ağza bir dayanak noktası veriyor: mutlak konumlu
   olduğu için hiçbir kutunun yüksekliğini değiştirmiyor, yani başlık
   yüksekliği ve masaüstü düzeni aynı kalıyor. Ölçüler em cinsinden,
   kaynak yazı boyuna bağlı — .mo .09em aşağı kaydığı için üst boşluk
   o kadar fazladan alıyor. Renk markanın mavisi; yazı currentColor
   olduğundan koyu zeminde ağız tek başına ayarlanabilsin diye
   değişkene bağlandı. */
.marka-gozler{position:relative;display:inline-flex;align-items:center}
.marka-agiz{
  position:absolute;left:50%;top:100%;margin-top:.222em;
  width:1.2em;height:auto;transform:translateX(-50%);
  fill:none;stroke:var(--marka-agiz,#2457e6);
  stroke-width:4.1;stroke-linecap:round;overflow:visible
}

/* İlk karşılaşmada görünen iki o. */
.marka-giris{position:absolute;left:0;top:50%;transform:translateY(-50%);line-height:0}
.mg{width:58px;height:auto;overflow:visible}
.mg-goz{transform-box:fill-box;transform-origin:center}
.mg-halka{fill:none;stroke:currentColor;stroke-width:3}
.mg-nokta{fill:currentColor}

/* Animasyon devre dışıysa kelimenin tamamı okunur kalır. */
@keyframes marka-kirp{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.07)}}
@keyframes marka-giris{
  0%{opacity:0;transform:translateY(-50%) scale(.88)}
  12%,76%{opacity:1;transform:translateY(-50%) scale(1)}
  100%{opacity:0;transform:translateY(-50%) scale(.96)}
}
@keyframes marka-harf{from{opacity:0;transform:translateY(.24em)}to{opacity:1;transform:none}}
@keyframes marka-agiz-ciz{from{stroke-dasharray:100;stroke-dashoffset:100}to{stroke-dasharray:100;stroke-dashoffset:0}}
@keyframes marka-bekleyis{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}

.marka .mg-goz{animation:marka-kirp .25s ease-in-out .28s 2}
.marka-giris{opacity:0;animation:marka-giris 1.34s ease both}
.marka-yazi>*{animation:marka-harf .34s cubic-bezier(.2,.7,.2,1) backwards}
.marka-yazi>*:nth-child(1){animation-delay:1.32s}
.marka-yazi>*:nth-child(2){animation-delay:1.47s}
.marka-yazi>*:nth-child(3){animation-delay:1.68s}
.marka-yazi>*:nth-child(4){animation-delay:1.83s}
.marka-yazi>*:nth-child(5){animation-delay:1.98s}
.marka-yazi>*:nth-child(6){animation-delay:2.13s}
/* Ağız en sona kalıyor: kelime tamamlandıktan sonra soldan sağa çiziliyor. */
.marka:not(.marka-hazir) .marka-agiz path{animation:marka-agiz-ciz .46s ease-out 2.3s backwards}
.marka .mo-bebek{animation:marka-bekleyis 6s ease-in-out 2.2s infinite}
.brand:hover .marka-hazir .mo{animation:marka-kirp .3s ease-in-out}

/* Oturumun sonraki sayfalarında doğrudan tamamlanmış marka. */
.marka-hazir .marka-giris{display:none}
.marka-hazir .marka-yazi>*{animation:none}

@media (prefers-reduced-motion:reduce){
  .marka .mg-goz,.marka-giris,.marka-yazi>*,.marka .mo-bebek,
  .marka .marka-agiz path{animation:none!important}
  .marka-giris{display:none}
}

/* ---------- kurulum: CV adımı ----------
   Akışın ilk ekranı. Genel bakış ekranının (.ov) düzenini kullanıyor
   ama sağdaki kart yok: burada tek bir karar var, ekran onu taşısın. */
.ov-cv{grid-template-columns:minmax(0,1fr)}
.ov-cv .ov-copy{max-width:52ch}
.ov-cv .ov-lede{margin:14px 0 26px;font-size:17px;line-height:1.6;color:var(--muted)}
.cv-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cv-acts .btn{cursor:pointer}
.cv-durum{
  display:flex;align-items:center;gap:9px;margin-top:18px;
  font-size:15px;color:var(--ink-2)
}
/* CV'den gelip yarım kalan alan: kişi formu dolu bulduğunda gözü
   buraya gitsin. Zorunlu alan hatası değil, "burası eksik kaldı"
   işareti — rengi de ona göre uyarı tonunda, hata kırmızısı değil. */
.fx-row.fx-cv-eksik{
  border-left:3px solid var(--yellow,#f4c84a);
  padding-left:14px;margin-left:-17px;border-radius:2px
}

/* ---------- kurulum: eksikleri toplayan şablon kartı ----------
   Sohbet ekranının aksine burada avatar, konuşma balonu ve "yazıyor"
   göstergesi yok. Kişi karşısında biriyle konuşuyormuş baskısı
   hissetmeden kısa bir form dolduruyor: tek soru, üstte ilerleme,
   altta cevap. Soru büyük ve tek başına duruyor ki göz aramasın. */
.qcard{
  max-width:640px;margin:0 auto;padding:0 0 26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(16,33,61,.06);overflow:hidden
}
.qcard-bar{height:4px;background:var(--paper-2,#eef1f6)}
.qcard-bar>i{display:block;height:100%;width:0;background:var(--green,#2e9e6b);transition:width .3s ease}
.qcard-top{padding:18px 30px 0}
.qcard-top .sayac{font-size:13px;font-weight:600;color:var(--muted)}
.qcard-q{
  margin:10px 30px 0;font-family:var(--display);
  font-size:clamp(21px,2.3vw,27px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)
}
.qcard-hint{margin:10px 30px 0;font-size:15px;line-height:1.6;color:var(--muted)}
.qcard #composeExtra,.qcard #composeMain{padding:0 30px}
.qcard #composeExtra:not(:empty){margin-top:20px}
.qcard #composeMain:not(:empty){margin-top:14px}
.qcard .err{margin:10px 30px 0}
.qcard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:22px 30px 0;padding-top:16px;border-top:1px solid var(--line)
}
.qcard-foot button[id="skipQ"]{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--muted);text-decoration:underline
}
.qcard-foot button[id="skipQ"][hidden]{display:none}
@media (max-width:560px){
  .qcard-top,.qcard .err{padding-left:20px;padding-right:20px}
  .qcard-q,.qcard-hint,.qcard-foot{margin-left:20px;margin-right:20px}
  .qcard #composeExtra,.qcard #composeMain{padding:0 20px}
}

/* ---------- kurulum: tek bölümlük meslek ekranı ----------
   CV akışında meslek seçimi form değil, akışın bir sonraki adımı gibi
   durmalı. Bölüm listesi (rail) gizleniyor — tek bölüm var, listelenecek
   bir şey yok — ve alan, eksik sorularını soran kartla aynı genişliğe
   ve beyaz zemine oturuyor. Böylece kişi "başka bir ekrana atıldım"
   hissetmiyor, aynı akışta ilerliyor. */
.fx.fx-tek{display:block}
.fx.fx-tek .fx-rail{display:none}
.fx.fx-tek .fx-main{
  max-width:640px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(16,33,61,.06);padding:8px 30px 26px
}
.fx.fx-tek .fx-sec>h3{display:none}
@media (max-width:560px){ .fx.fx-tek .fx-main{padding:8px 20px 22px} }

/* ============================================================
   MOBİL DÜZELTMELERİ

   Hepsi 560 piksel altında; masaüstü tasarımına hiç dokunulmuyor.
   Aşağıdaki her kural 375x812'de ÖLÇÜLMÜŞ bir sorunu çözüyor.
   ============================================================ */
@media (max-width:560px){

  /* --- iOS'ta zorla yakınlaştırma ---
     Safari, 16 pikselden küçük yazılı bir alana dokunulduğunda sayfayı
     kendiliğinden yakınlaştırıyor ve kullanıcı elle geri küçültmek
     zorunda kalıyor. Ölçüldü: giriş formundaki e-posta alanı 15px,
     kayıt akışındaki alanlar 14px. Yalnızca mobilde 16'ya çıkıyor;
     kutu yüksekliği zaten 48px olduğu için düzen kaymıyor. */
  .inp,
  .at-guided .inp,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="date"], select, textarea{
    font-size:16px;
  }
  /* Kayıt akışındaki kutular 16px yazıyla biraz daha yer istiyor. */
  .at-guided .inp{min-height:46px}

  /* --- dokunma hedefleri ---
     Parmakla dokunulan her şey en az 44x44 olmalı (Apple ve Google
     aynı sayıyı veriyor). Ölçülen değerler yorumlarda.
     Görsel boyut korunuyor, büyüyen yalnızca dokunulabilir alan. */

  /* menü düğmesi: 24x31 idi — mobildeki ANA gezinme denetimi */
  .burger{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:-10px;   /* kenar boşluğu aynı kalsın */
  }

  /* arama ikonu: 40x40 idi */
  .hdr-search-icon{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* "Hemen katıl" kutusunun kapatma düğmesi: 26x26 idi.
     Kutu ekranın altında sabit duruyor; kapatamayan kullanıcı
     içeriğin bir kısmını hiç göremiyor. */
  .joinbox-x{
    width:40px; height:40px;
    top:4px; right:4px;
  }

  /* "Tümünü gör" bağlantıları: 31px yüksekti, sayfada onlarca var */
  .section-link,
  .home-v2 .home-title-row>a,
  .home-v2 .section-link{
    min-height:44px;
    display:inline-flex; align-items:center;
  }

  /* meslek etiketleri: 33px yüksekti */
  .chip, .home-v2 .chips .chip{
    min-height:40px;
    display:inline-flex; align-items:center;
  }

  /* --- çok küçük yazılar ---
     10.5-11.5px mobilde okunmuyor. Marka sözü başlıkta üç satıra
     bölünüyordu; mobilde zaten gizli olduğu için ona dokunulmuyor. */
  .hero-references-label{font-size:12px}

  /* --- kaydırılabilir şeritler ---
     Kategori şeridi ve benzeri yatay listeler parmakla kaydırılıyor;
     iOS'ta ivme olmadan takılıyor ve kaydırma çubuğu içeriği örtüyor. */
  .catbar, .cat-strip, .chips, .home-v2 .chips{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .catbar::-webkit-scrollbar,
  .cat-strip::-webkit-scrollbar,
  .chips::-webkit-scrollbar{display:none}
}