/* ==========================================================================
   KG Savunma /new — SSS (faq) şablonu · şirket ajanı
   Yerel <details>, masaüstünde iki bağımsız sütun (biri açılınca komşusu esnemez). Kapsam: .fq* sınıfları.
   Açılış hareketi yalnız opaklık/dönüşüm; azaltılmış harekette yok.
   ========================================================================== */

/* ---------- başlık ---------- */
/* Türkçe büyük harfte İ/Ö/Ü/Ş işaretleri .88–.90 satır aralığında üst satıra çarpıyor → yalnız TR'de biraz aç */
.tpl-faq .phero__title:lang(tr) { line-height: .96; }
/* Giriş görseli (kg-gear-close, yatay): sinematik ton */
.tpl-faq .phero__media img { filter: saturate(.78) contrast(1.1) brightness(.84); }
/* Bölünmüş giriş (≥900, Kurumsal sayfasıyla aynı dil): görsel satır-sonu tarafında, baş tarafı yumuşak maskeyle siyaha erir;
   yazı siyah zeminde. RTL'de kutu kendiliğinden sola geçer, maske yönü çevrilir. Fotoğraf aynalanmaz. */
@media (min-width: 900px) {
  .tpl-faq .phero__media {
    inset-inline-start: 44%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  }
  [dir="rtl"] .tpl-faq .phero__media { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 34%); mask-image: linear-gradient(270deg, transparent 0, #000 34%); }
  .tpl-faq .phero__lead { max-width: min(36em, 46vw); }
}
/* Tablet (561–899): görsel üst-satır sonu köşesinde, baş tarafa ve alta doğru erir (yazı bloğu altta, siyah zeminde) */
@media (min-width: 561px) and (max-width: 899px) {
  .tpl-faq .phero__media {
    inset-inline-start: 22%; inset-block-end: 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 58%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 58%, transparent 100%); mask-composite: intersect;
  }
  [dir="rtl"] .tpl-faq .phero__media {
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 40%), linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(270deg, transparent 0, #000 40%), linear-gradient(180deg, #000 58%, transparent 100%);
  }
}
/* Telefon: görsel üst bantta (askerlerin yüzü üst bilgi şeridinin altında), alta doğru siyaha erir; yazı bloğu bandın altından başlar
   → yazı yüzlerin/tüfeklerin üstüne binmez. Giriş ~660 px, 390×844'te ilk ekrana sığar. */
@media (max-width: 560px) {
  .tpl-faq .phero__media {
    inset-block-end: auto; block-size: calc(var(--mast) + 70vw);
    -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 100%); mask-image: linear-gradient(180deg, #000 56%, transparent 100%);
  }
  .tpl-faq .phero__in { padding-top: calc(var(--mast) + 50vw); }
}
.fq__head .t-h2:lang(tr) { line-height: 1; }
.fq__head { grid-template-columns: minmax(0, 1fr) minmax(0, 29em); align-items: end; }
.fq__aside { display: grid; justify-items: start; gap: 18px; }
.fq__note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-inline-start: 2px solid var(--au); background: var(--k2); font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.fq__note .ico { color: var(--au); margin-top: 1px; }
.fq__all {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line2);
  font-size: 12px; font-weight: 700; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.fq__all:hover { border-color: var(--au); color: var(--au); }
.fq__all-i { position: relative; inline-size: 12px; block-size: 12px; }
.fq__all-i::before, .fq__all-i::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; inline-size: 12px; block-size: 1.5px; margin-top: -.75px; background: currentColor; transition: transform var(--t2) var(--ease-out); }
.fq__all-i::after { transform: rotate(90deg); }
.fq__all.is-open .fq__all-i::after { transform: rotate(0deg); }

/* ---------- soru listesi ---------- */
.fq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 20px); align-items: start; }
/* tek sütun izi minmax(0,1fr): açılan yanıttaki tablo/uzun sözcük kartı sütundan taşırıp sayfayı yana kaydırmaz */
.fq__col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: clamp(12px, 1.1vw, 16px); }
/* konu etiketi summary'nin DIŞINDA (düğme adına karışmaz), görsel olarak kartın üst satırında; tıklama alttaki summary'ye geçer */
.fq__w { position: relative; min-width: 0; }
.fq__tag {
  position: absolute; z-index: 1; inset-block-start: 24px; inset-inline: calc(26px + 30px + 18px) calc(24px + 40px + 18px); margin: 0; pointer-events: none;
  font-family: var(--f-m); font-size: 10.5px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fq__item {
  --c: 16px; position: relative; background: var(--k2);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); transition: background-color var(--t2) var(--ease);
}
[dir="rtl"] .fq__item { clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }
.fq__item::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: var(--au); transform: scaleY(0); transform-origin: top; transition: transform var(--t3) var(--ease-out); }
.fq__item:hover { background: #14161B; }
.fq__item[open] { background: var(--k3); }
.fq__item[open]::before { transform: scaleY(1); }
.fq__q { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; grid-template-rows: auto auto; align-items: start; gap: 9px 18px; padding-block: 24px; padding-inline: 26px 24px; cursor: pointer; list-style: none; }
.fq__q::before { content: ""; grid-column: 2; grid-row: 1; font-size: 10.5px; block-size: 1.3em; }   /* etiketin yeri */
.fq__q::-webkit-details-marker { display: none; }
.fq__q::marker { content: ""; }
.fq__q:focus-visible { outline: 2px solid var(--au); outline-offset: -4px; }
.fq__n { grid-column: 1; grid-row: 1 / span 2; padding-top: 3px; font-family: var(--f-m); font-size: 12.5px; letter-spacing: .1em; color: var(--au); font-variant-numeric: tabular-nums; }
.fq__t { grid-column: 2; grid-row: 2; min-width: 0; font-family: var(--f-d); font-stretch: 75%; font-weight: 780; font-size: clamp(22px, 1.72vw, 28px); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; color: var(--fg); text-wrap: balance; }
.fq__t:lang(tr) { line-height: 1.08; }
.fq__i { grid-column: 3; grid-row: 1 / span 2; position: relative; inline-size: 40px; block-size: 40px; border: 1px solid var(--line2); color: var(--fg); transition: background-color var(--t2) var(--ease), border-color var(--t2) var(--ease), color var(--t2) var(--ease); }
.fq__i::before, .fq__i::after { content: ""; position: absolute; inset-inline-start: 50%; top: 50%; inline-size: 14px; block-size: 1.5px; margin-inline-start: -7px; margin-top: -.75px; background: currentColor; transition: transform var(--t2) var(--ease-out); }
.fq__i::after { transform: rotate(90deg); }
.fq__q:hover .fq__i { border-color: var(--au); }
.fq__item[open] .fq__i { background: var(--au); border-color: var(--au); color: #0B0C0F; }
.fq__item[open] .fq__i::after { transform: rotate(0deg); }

/* yanıt */
.fq__a { padding-block: 0 30px; padding-inline: calc(26px + 30px + 18px) 26px; }
.fq__a > * + * { margin-top: 14px; }
.fq__a p { max-width: 44em; font-size: 16px; line-height: 1.68; color: var(--fg2); text-wrap: pretty; }
.fq__a p + p { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .fq__item[open] .fq__a { animation: fq-in 560ms var(--ease-out) both; }
}
@keyframes fq-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.fq__tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line2); }
.fq__table { width: 100%; font-size: 14.5px; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; }
.fq__table th, .fq__table td { padding-block: 11px; padding-inline: 0 16px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.fq__table thead th { padding-block: 10px; font-family: var(--f-m); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.fq__table tbody th { font-weight: 500; color: var(--fg); }
.fq__table td { color: var(--fg2); }
.fq__table td:last-child { white-space: nowrap; }
.fq__lvl { font-family: var(--f-d); font-stretch: 75%; font-weight: 820; font-size: 21px; line-height: 1; color: var(--fg); }
.fq__lvl bdi[dir="ltr"], [lang="ar"] .fq__lvl bdi[dir="ltr"] { font-family: "Hubot Sans", "Hubot Fallback", "Arial Narrow", Arial, sans-serif; }
.fq__see { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.fq__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line2);
  font-size: 12px; font-weight: 700; font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--fg);
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease), background-color var(--t1) var(--ease);
}
.fq__go:hover { border-color: var(--au); color: var(--au); }
.fq__go .arr { transition: transform var(--t2) var(--ease-out); }
.fq__go:hover .arr { transform: translateX(3px); }
[dir="rtl"] .fq__go:hover .arr { transform: scaleX(-1) translateX(3px); }

@media (max-width: 1100px) { .fq__head { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .fq__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .fq__q { grid-template-columns: 24px minmax(0, 1fr) 36px; gap: 8px 12px; padding-block: 18px; padding-inline: 18px 16px; }
  .fq__tag { inset-block-start: 18px; inset-inline: calc(18px + 24px + 12px) calc(16px + 36px + 12px); }
  .fq__i { inline-size: 36px; block-size: 36px; }
  .fq__t { font-size: 22px; }
  .fq__a { padding-block: 0 22px; padding-inline: 18px 16px; }
  .fq__a p { font-size: 15.5px; }
}

/* ---------- sonraki adım ---------- */
.fq-next__title { margin-bottom: clamp(22px, 2.4vw, 34px); }
.fq-next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 20px); }
.fq-next__card {
  --c: 16px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px;
  min-height: clamp(210px, 17vw, 260px); padding: clamp(20px, 1.8vw, 28px); overflow: hidden; background: var(--k3); color: #ECEAE4;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
[dir="rtl"] .fq-next__card { clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }
.fq-next__img { position: absolute; inset: 0; z-index: -2; }
.fq-next__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.12) brightness(.64); transition: transform var(--t3) var(--ease-out), filter var(--t2) var(--ease); }
.fq-next__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,7,8,0) 20%, rgba(6,7,8,.86) 100%); }
.fq-next__card::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--au); transform: scaleX(0); transform-origin: var(--o, left); transition: transform var(--t3) var(--ease-out); }
[dir="rtl"] .fq-next__card::after { --o: right; }
.fq-next__card:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.08) brightness(.74); }
.fq-next__card:hover::after, .fq-next__card:focus-visible::after { transform: scaleX(1); }
.fq-next__card:focus-visible { outline: 2px solid var(--au); outline-offset: -4px; }
.fq-next__txt { display: grid; gap: 10px; }
.fq-next__k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-m); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--au); }
.fq-next__n { color: rgba(236,234,228,.6); }
.fq-next__l { font-family: var(--f-d); font-stretch: 75%; font-weight: 800; font-size: clamp(24px, 2vw, 31px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.fq-next__go { display: inline-grid; place-items: center; inline-size: 46px; block-size: 46px; border: 1px solid rgba(245,200,66,.6); color: var(--au); transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease); }
.fq-next__card:hover .fq-next__go { background: var(--au); color: #0B0C0F; }
@media (max-width: 900px) { .fq-next__list { grid-template-columns: 1fr; } .fq-next__card { min-height: 150px; } }

/* ---------- Arapça ---------- */
[lang="ar"] .fq__all, [lang="ar"] .fq__tag, [lang="ar"] .fq__t, [lang="ar"] .fq__table thead th, [lang="ar"] .fq__go, [lang="ar"] .fq-next__k, [lang="ar"] .fq-next__l { letter-spacing: 0; text-transform: none; }
[lang="ar"] .fq__tag, [lang="ar"] .fq__table thead th, [lang="ar"] .fq-next__k { font-family: var(--f-d); font-weight: 600; font-size: 12.5px; }
[lang="ar"] .fq__q::before { font-size: 12.5px; }
[lang="ar"] .fq__t { font-stretch: 100%; font-weight: 700; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; }
[lang="ar"] .fq-next__l { font-stretch: 100%; font-weight: 700; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.4; }
[lang="ar"] .fq__all, [lang="ar"] .fq__go { font-family: var(--f-d); font-stretch: 100%; font-size: 13px; }
[lang="ar"] .fq__a p { line-height: 1.85; }