/* QUALIX — 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: QUALIX logosu (963×220) Grupas logosundan daha yatay */
.site-header .qualix-logo{height:40px}
@media (max-width:720px){ .site-header .qualix-logo{height:32px} }
.foot-brand .qualix-logo{height:38px}
.pill-qualix{background:#fff; color:var(--ink-700); border:1.5px solid var(--line); box-shadow:none; padding:0 16px}
.pill-qualix:hover{border-color:var(--brand-300); color:var(--brand-700); filter:none}
.pill-qualix.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}
.qualix-hero{padding:46px 0 54px}
.qualix-vitrin{min-height:420px; align-items:center; perspective:1600px}
.qualix-vitrin .t1{position:absolute; width:96%; right:-4%; top:6%; transform:rotateY(-10deg) rotateX(3deg)}
.qualix-vitrin .t2{position:absolute; width:66%; left:-2%; bottom:2%; transform:rotateY(-10deg) rotateX(3deg) translateZ(70px)}
@media (max-width:900px){ .qualix-vitrin{min-height:300px; margin-top:12px} .qualix-vitrin .t1{right:0; width:100%} }
@media (max-width:560px){ .qualix-vitrin{min-height:220px} .qualix-vitrin .t2{display:none} .qualix-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ı) */
.qualix-tools{grid-template-columns:repeat(3,1fr); gap:18px}
.qualix-tool .abbr{background:var(--grad); width:max-content; min-width:54px; height:46px; padding:0 12px; display:inline-grid}
.qualix-tool h3{font-size:1.08rem}
.qualix-tool p{font-size:.9rem}
@media (max-width:900px){ .qualix-tools{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .qualix-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}
.qualix-cta{text-align:center; margin-top:0} .qualix-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 .qualix-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 .qualix-logo{height:34px}
}

/* QUALIX menüsünde 7 düğme 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}
}