/* TALENTFIT — grupas.com.tr tasarım sistemine (style.css) eklenen ürün bileşenleri.
   Değişkenler style.css'ten: --brand-*, --ink-*, --line, --grad, --shadow*, --radius*. */

/* üst bar: TALENTFIT logosu (502×97) */
.site-header .tf-logo{height:36px}
@media (max-width:720px){ .site-header .tf-logo{height:32px} }
.foot-brand .tf-logo{height:38px}
.pill-tf{background:#fff; color:var(--ink-700); border:1.5px solid var(--line); box-shadow:none; padding:0 16px}
.pill-tf:hover{border-color:var(--brand-300); color:var(--brand-700); filter:none}
.pill-tf.on{background:var(--brand-600); border-color:var(--brand-600); color:#fff}
.grupas-imza{display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; color:#c6d7e5; font-size:.86rem; font-weight:600}
.grupas-imza img{height:30px; width:auto; filter:brightness(0) invert(1); opacity:.9}
.grupas-imza:hover{color:#fff}

/* hero vitrini: tarayıcı çerçevesinde ekran görüntüleri */
.tarayici{background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.55)}
.tarayici .cubuk{height:28px; background:#eef3f8; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid var(--line)}
.tarayici .cubuk i{width:9px; height:9px; border-radius:50%; background:#d5dde7}
.tarayici .cubuk i:nth-child(1){background:#ff6b5f} .tarayici .cubuk i:nth-child(2){background:#ffc33d} .tarayici .cubuk i:nth-child(3){background:#2ccb63}
.tarayici .cubuk b{margin-left:8px; font-size:.7rem; color:var(--ink-400); font-weight:700; letter-spacing:.02em}
.tarayici img{display:block; width:100%; height:auto}
.tarayici img[data-grup]{cursor:zoom-in}
.tf-hero{padding:46px 0 54px}
.tf-vitrin{min-height:420px; align-items:center; perspective:1600px}
.tf-vitrin .t1{position:absolute; width:96%; right:-4%; top:6%; transform:rotateY(-10deg) rotateX(3deg)}
.tf-vitrin .t2{position:absolute; width:66%; left:-2%; bottom:2%; transform:rotateY(-10deg) rotateX(3deg) translateZ(70px)}
@media (max-width:900px){ .tf-vitrin{min-height:300px; margin-top:12px} .tf-vitrin .t1{right:0; width:100%} }
@media (max-width:560px){ .tf-vitrin{min-height:220px} .tf-vitrin .t2{display:none} .tf-vitrin .t1{position:relative; transform:none} }

/* sorun listesi */
.sorun{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start}
.sorun-liste{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.sorun-liste li{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; color:var(--ink-700); box-shadow:var(--shadow-sm)}
.sorun-liste .sx{flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#fde7e4; color:#b42318}
.sorun-liste .sx svg{width:13px; height:13px; stroke:currentColor; stroke-width:2.6; fill:none}
@media (max-width:900px){ .sorun{grid-template-columns:1fr; gap:26px} }

/* kalite planlama zinciri */
.zincir{list-style:none; padding:0; margin:0 0 40px; display:grid; grid-template-columns:repeat(6,1fr); gap:0; counter-reset:z}
.zincir li{position:relative; text-align:center}
.zincir li:not(:last-child)::after{content:""; position:absolute; top:31px; left:calc(50% + 36px); right:calc(-50% + 36px); height:2px;
  background:linear-gradient(90deg,var(--brand-400),var(--accent)); opacity:.55}
.zincir a{display:block; color:inherit; padding:4px 6px}
.zincir .halka{width:62px; height:62px; margin:0 auto 10px; border-radius:18px; display:grid; place-items:center; color:#fff;
  background:var(--grad); box-shadow:var(--shadow); transition:.2s}
.zincir .halka svg{width:28px; height:28px}
.zincir a:hover .halka{transform:translateY(-3px) scale(1.04)}
.zincir b{display:block; font-size:.98rem; color:var(--ink-900)}
.zincir small{color:var(--ink-500); font-size:.82rem}
.section--tools .zincir b{color:#fff} .section--tools .zincir small{color:#b9d3e6}
@media (max-width:900px){ .zincir{grid-template-columns:repeat(3,1fr); row-gap:20px} .zincir li:nth-child(3)::after{display:none} }
@media (max-width:520px){ .zincir{grid-template-columns:repeat(2,1fr)} .zincir li::after{display:none!important} }

/* modül kartları (grupas .tool kartı) */
.tf-tools{grid-template-columns:repeat(3,1fr); gap:18px}
.tf-tool .abbr{background:var(--grad); width:max-content; min-width:54px; height:46px; padding:0 12px; display:inline-grid}
.tf-tool h3{font-size:1.08rem}
.tf-tool p{font-size:.9rem}
@media (max-width:900px){ .tf-tools{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .tf-tools{grid-template-columns:1fr} }

/* ekran turu */
.ekran-sekmeler{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:22px}
.ekran-sekme{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:#fff; cursor:pointer; font:inherit; color:var(--ink-800); text-align:left; transition:.16s}
.ekran-sekme b{font-size:1rem; color:var(--ink-900)} .ekran-sekme span{font-size:.8rem; color:var(--ink-500)}
.ekran-sekme:hover{border-color:var(--brand-300)}
.ekran-sekme[aria-selected="true"]{background:var(--brand-800); border-color:var(--brand-800)}
.ekran-sekme[aria-selected="true"] b, .ekran-sekme[aria-selected="true"] span{color:#fff}
.ekran-sahne{display:grid; grid-template-columns:1.55fr 1fr; gap:26px; align-items:start}
.ekran-sahne .tarayici{border-color:var(--line)}
.ekran-adimlar{display:grid; gap:10px}
.ekran-adim{display:flex; gap:12px; align-items:flex-start; text-align:left; border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm);
  padding:12px 14px; cursor:pointer; font:inherit; color:inherit; transition:.16s}
.ekran-adim .flow-num{flex:0 0 28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand-700); font-weight:800; font-size:.85rem}
.ekran-adim b{display:block; color:var(--ink-900); font-size:.95rem} .ekran-adim em{font-style:normal; color:var(--ink-500); font-size:.86rem}
.ekran-adim[aria-selected="true"]{border-color:var(--brand-500); box-shadow:var(--ring)}
.ekran-adim[aria-selected="true"] .flow-num{background:var(--brand-600); color:#fff}
.ekran-adimlar .btn{justify-self:start; margin-top:4px}
.ekran-not{font-size:.82rem; color:var(--ink-400); margin-top:12px}
@media (max-width:1000px){ .ekran-sekmeler{grid-template-columns:repeat(3,1fr)} .ekran-sahne{grid-template-columns:1fr} }
@media (max-width:520px){ .ekran-sekmeler{grid-template-columns:repeat(2,1fr)} }

/* galeri */
.galeri{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.galeri figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.galeri img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); cursor:zoom-in}
.galeri figcaption{padding:14px 18px} .galeri figcaption b{display:block; color:var(--ink-900)} .galeri figcaption span{color:var(--ink-500); font-size:.9rem}
@media (max-width:760px){ .galeri{grid-template-columns:1fr} }

/* faydalar, lisans */
.fayda-izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.fayda-izgara .pillar{padding:26px 22px}
.fayda-izgara .pillar h3{font-size:1.06rem}
.fayda-izgara .pillar p{font-size:.92rem}
@media (max-width:1000px){ .fayda-izgara{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .fayda-izgara{grid-template-columns:1fr} }
.lisans-izgara{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:900px; margin:0 auto}
.lisans-kart .hs-t{display:flex; flex-direction:column; flex:1}
.lisans-kart .hs-t small{font-weight:500; color:var(--ink-500); font-size:.86rem; margin-top:2px}
@media (max-width:760px){ .lisans-izgara{grid-template-columns:1fr} }
.lisans-kartlar{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.lisans-buyuk{display:flex; flex-direction:column}
.lisans-buyuk p{flex:1; margin-bottom:18px!important}
.lisans-buyuk .btn{align-self:flex-start}
@media (max-width:1000px){ .lisans-kartlar{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .lisans-kartlar{grid-template-columns:1fr} }
.fiyat-notu{text-align:center; color:var(--ink-500); margin-top:22px}
.center-cta{text-align:center; margin-top:28px}

/* modüller listesi */
.modul-satir{display:grid; grid-template-columns:1fr 1.1fr; gap:46px; align-items:center}
.modul-satir.ters > div:first-child{order:2}
.modul-satir .tarayici{border-color:var(--line)}
.sw-brand.koyu{color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100)}
@media (max-width:900px){ .modul-satir{grid-template-columns:1fr; gap:24px} .modul-satir.ters > div:first-child{order:0} }
.diger-moduller{display:flex; flex-wrap:wrap; gap:8px}
.diger-moduller a{border:1.5px solid var(--line); background:#fff; border-radius:100px; padding:7px 14px; font-weight:700; font-size:.88rem; color:var(--ink-700)}
.diger-moduller a:hover{border-color:var(--brand-300); color:var(--brand-700)}
.diger-moduller a.on{background:var(--brand-800); border-color:var(--brand-800); color:#fff}
.flow-shot img{cursor:zoom-in}

/* CTA, form */
.cta-beyaz{background:#fff; color:var(--brand-800); border:0}
.cta-beyaz:hover{background:var(--brand-50); color:var(--brand-900); transform:translateY(-2px)}
.cta-bolum{padding:8px 0 88px}
.tf-cta{text-align:center; margin-top:0} .tf-cta p{color:#dcecf9}
.form-hata{background:#fff4e5; border:1px solid #ffd59a; color:#7a4a00; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-weight:600}
.tur-secim{display:flex; gap:18px; flex-wrap:wrap; padding:6px 0}
.tur-secim label{display:flex; gap:6px; align-items:center; font-weight:600; color:var(--ink-700)}
.bal{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form-card select{width:100%}

/* ekran büyütücü */
.isik-kutusu{position:fixed; inset:0; z-index:1200; background:rgba(5,18,34,.9); display:grid; place-items:center; padding:28px}
.isik-kutusu[hidden]{display:none}
.isik-kutusu figure{margin:0; max-width:min(1400px,92vw)}
.isik-kutusu img{max-height:82vh; width:auto; max-width:100%; margin:0 auto; display:block; border-radius:10px}
.isik-kutusu figcaption{color:#dcecf9; text-align:center; margin-top:12px; font-weight:600}
.isik-btn{position:absolute; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.7rem; cursor:pointer; display:grid; place-items:center}
.isik-btn svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2}
.isik-kapat{top:20px; right:20px} .isik-onceki{left:20px; top:50%} .isik-sonraki{right:20px; top:50%}

/* yönetim paneli */
.yonetim{padding:36px 0 80px}
.yonetim h1{font-size:1.7rem}
.yonetim table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden}
.yonetim th, .yonetim td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:top}
.yonetim th{background:var(--bg-soft); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500)}
.yonetim-menu{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 24px}
.yonetim-menu a{border:1.5px solid var(--line); background:#fff; padding:7px 14px; border-radius:100px; font-weight:700; font-size:.9rem; color:var(--ink-700)}
.yonetim-menu a.on{background:var(--brand-800); border-color:var(--brand-800); color:#fff}
.durum{display:inline-block; padding:2px 10px; border-radius:100px; font-size:.78rem; font-weight:700; background:var(--brand-50); color:var(--brand-700)}
.durum.yeni{background:#fff1d6; color:#8a5a00} .durum.kazanildi{background:#dcf5ea; color:#0e6b4b} .durum.kapandi{background:#eef2f6; color:var(--ink-500)}
.flash{background:#dcf5ea; color:#0e6b4b; border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:16px; font-weight:600}
.sayi-izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px}
.sayi-izgara .pillar b{display:block; font-size:2rem; color:var(--ink-900)}
@media (max-width:760px){ .sayi-izgara{grid-template-columns:1fr 1fr} }

/* form: açılır listeler grupas .field input görünümünde */
.field select{width:100%; padding:12px 40px 12px 14px; border:1px solid var(--line); border-radius:11px; font:inherit; color:var(--ink-900);
  background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f7484' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance:none; appearance:none; transition:.15s}
.field select:focus{outline:none; border-color:var(--brand-400); box-shadow:var(--ring); background-color:#fff}
.field input[type="radio"]{width:auto; padding:0}
.field{margin-bottom:14px}
@media (max-width:640px){ .form-row{grid-template-columns:1fr} }

/* iletişim: üst bar telefonu, CTA düğmeleri */
.nav-tel{white-space:nowrap}
.nav-tel svg{flex:0 0 17px}
.site-header .brand{flex-shrink:0}
.site-header .tf-logo{max-width:none}
@media (max-width:1760px) and (min-width:1181px){ .nav-tel span{display:none} .nav-tel{padding:0 12px} }
.cta-dugmeler{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.cta-dugmeler .btn svg{width:18px; height:18px}
@media (max-width:1366px) and (min-width:1181px){
  .site-header .pill-btn{padding:0 13px; font-size:.88rem}
  .site-header .pill-home{padding:0 12px}
  .site-header .cta-contact{padding:0 16px}
  .site-header .tf-logo{height:34px}
}

/* TALENTFIT menüsünde 6 düğme + giriş var (grupas.com.tr'de 4) → mobil menüye 1180 px'de geçilir (grupas'ın 920 px kuralının aynısı) */
@media (max-width:1180px){
  .container.nav{position:relative}
  .nav-burger{display:flex}
  .nav-right{position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch;
    gap:12px; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    padding:18px 20px 24px; max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .28s ease, opacity .2s ease, visibility .2s ease}
  .nav-right.open{max-height:82vh; overflow:auto; opacity:1; visibility:visible}
  .pillar-nav{flex-direction:column; align-items:stretch; gap:8px}
  .pill-btn{justify-content:center; height:46px}
  .cta-contact{justify-content:center; height:46px; width:100%}
  .nav-email{justify-content:center; height:46px; width:100%; order:-1}
  .lang-inline{justify-content:center; margin:4px 0 0; gap:6px}
  .lang-opt{padding:8px 14px}
}

/* ============ TALENTFIT bileşenleri ============ */
/* marka: TALENTFIT laciverdi (#002563) → mavi (#0080f8) */
.talentfit{--grad:linear-gradient(135deg,#002563,#0b4fb3 55%,#0080f8); --grad-soft:linear-gradient(135deg,#00204f,#0a3f8f 60%,#0068d0)}
.nav-giris{white-space:nowrap}
.nav-giris svg{flex:0 0 17px}
@media (max-width:1760px) and (min-width:1181px){ .nav-giris span{display:none} .nav-giris{padding:0 12px} }

/* özellik kartları */
.tf-tool .tf-ic{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:12px}
.tf-tool .tf-ic svg{width:24px; height:24px}

/* paneller */
.tf-paneller{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.tf-panel{display:flex; flex-direction:column}
.tf-panel h3{font-size:1.1rem}
.tf-panel p{font-size:.93rem}
.tf-panel .tf-kim{color:var(--ink-700)}
.tf-panel .tf-erisim{margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); color:var(--ink-500); font-size:.86rem}
.tf-panel--grupas .pic{background:linear-gradient(135deg,#002563,#0b4fb3)} .tf-panel--firma .pic{background:linear-gradient(135deg,#0b4fb3,#0080f8)}
.tf-panel--kullanici .pic{background:linear-gradient(135deg,#0068d0,#2ba3ff)} .tf-panel--aday .pic{background:linear-gradient(135deg,#0080f8,#2ee6c0)}
.tf-panel .pic{color:#fff}
.tf-paneller--detay{grid-template-columns:1fr 1fr}
.tf-paneller--detay .sw-list{margin:4px 0 8px}
@media (max-width:1000px){ .tf-paneller{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .tf-paneller, .tf-paneller--detay{grid-template-columns:1fr} }

/* akış (zincir bileşeni, numaralı) */
.tf-akis .halka b{font-size:1.25rem; color:#fff}
.tf-akis small{display:block; padding:0 4px; line-height:1.45}
.tf-akis li > b{display:block; font-size:.98rem; color:var(--ink-900); margin-bottom:4px}

/* üyelik adımları */
.tf-adimlar{list-style:none; padding:0; margin:0 auto; max-width:1040px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tf-adimlar li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:6px}
.tf-adimlar .flow-num{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:800}
.tf-adimlar b{color:var(--ink-900); font-size:1.02rem}
.tf-adimlar span:last-child{color:var(--ink-500); font-size:.92rem}
@media (max-width:900px){ .tf-adimlar{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .tf-adimlar{grid-template-columns:1fr} }

/* zaman çizelgesi (nasıl çalışır) */
.tf-zaman{list-style:none; padding:0; margin:0 auto; max-width:820px; position:relative}
.tf-zaman::before{content:""; position:absolute; left:19px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--brand-400),var(--accent)); opacity:.5}
.tf-zaman li{position:relative; display:flex; gap:18px; padding:0 0 26px}
.tf-zaman .flow-num{flex:0 0 40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:800; z-index:1}
.tf-zaman h3{margin:6px 0 4px; font-size:1.12rem}
.tf-zaman p{margin:0; color:var(--ink-500)}

/* özellik listesi */
.tf-ozellik-liste{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.tf-ozellik{display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); scroll-margin-top:100px}
.tf-ozellik .pic{flex:0 0 52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--grad); color:#fff}
.tf-ozellik .pic svg{width:24px; height:24px}
.tf-ozellik h2{font-size:1.2rem; margin-bottom:6px}
.tf-ozellik p{color:var(--ink-700); font-size:.95rem}
.tf-ozellik:target{border-color:var(--brand-400); box-shadow:var(--ring)}
@media (max-width:860px){ .tf-ozellik-liste{grid-template-columns:1fr} }

/* sektörler, erişim */
.tf-sektorler{list-style:none; padding:0; margin:30px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:980px}
.tf-sektorler li{border:1.5px solid var(--line); background:#fff; border-radius:100px; padding:6px 14px; font-weight:700; font-size:.86rem; color:var(--ink-700)}
.tf-erisim-izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.tf-erisim-izgara--3{grid-template-columns:repeat(3,1fr)}
.tf-erisim-izgara .pillar{display:flex; flex-direction:column}
.tf-erisim-izgara .pillar p{flex:1}
.tf-erisim-izgara .btn{align-self:flex-start}
@media (max-width:1000px){ .tf-erisim-izgara, .tf-erisim-izgara--3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .tf-erisim-izgara, .tf-erisim-izgara--3{grid-template-columns:1fr} }

/* aday kodu */
.tf-kod-form{max-width:460px; margin:0 auto}
.tf-kod-form input[name="kod"]{font-size:1.5rem; letter-spacing:.3em; text-align:center; text-transform:uppercase; font-weight:800}
.tf-kod-not{color:var(--ink-500); font-size:.88rem; margin:14px 0 0; text-align:center}

/* mobil üst bar: .nav dolgusu yatay kenar boşluğunu sıfırlıyordu */
@media (max-width:1180px){ .container.nav{padding-left:16px; padding-right:16px} }