/* g3grup.com — tasarım sistemi
   Renkler ölçüldü (PSD pikseli), değiştirilmez: #F97F1A vurgu · #023E87 yapı · #231F20 metin.
   Turuncu geniş alanda kullanılmaz — buton, link, aktif filtre, ölçü çizgisi.
   Yön: mantıksal özellikler (inline-start/end) — AR için ikinci stil dosyası yok. */

/* ---------- 1. token ---------- */
:root {
  --turuncu:      #F97F1A;
  --turuncu-koyu: #D8660B;   /* hover — küçük alan */
  --turuncu-soluk:#FFF3E7;   /* rozet zemini */
  --lacivert:     #023E87;
  --lacivert-koyu:#012A5C;   /* footer, koyu bölüm */
  --metin:        #231F20;
  --metin-ikincil:#5A5654;
  --kagit:        #FFFFFF;
  --kagit-alt:    #F7F6F4;   /* bölüm zebrası */
  --cizgi:        #DEDAD6;
  --cizgi-koyu:   #B9B3AD;
  --yesil:        #1B7A4B;   /* SONUÇ / EKAP doğrulandı */
  --kirmizi:      #B32519;   /* acil şerit */

  --f-baslik: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-govde:  "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-veri:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --en:   1120px;  /* içerik genişliği */
  --oku:  65ch;    /* okuma sütunu */
  --pay:  24px;    /* kenar boşluğu */
  --r:    3px;     /* köşe — teknik belge, yuvarlak değil */
}
@media (max-width: 720px) { :root { --pay: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-govde);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--metin);
  background: var(--kagit);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--turuncu-koyu); text-underline-offset: 3px; }
a:hover { color: var(--turuncu); }
:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--f-baslik); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p, ul, ol { margin: 0 0 1em; }
.oku > p, .oku > ul, .oku > ol { max-width: var(--oku); }

/* sayılar istisnasız mono + tabular */
.veri, td.sayi, .sayi { font-family: var(--f-veri); font-variant-numeric: tabular-nums; }

.etiket {
  font-family: var(--f-veri); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--metin-ikincil);
}

/* ---------- 2. iskelet ---------- */
.kap { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: var(--pay); }
.bolum { padding-block: clamp(40px, 6vw, 72px); }
.bolum--alt { background: var(--kagit-alt); border-block: 1px solid var(--cizgi); }
.bolum--koyu { background: var(--lacivert-koyu); color: #EDF1F6; }
.bolum--koyu h2 { color: #fff; }
.bolum--koyu a { color: #FFC58A; }

/* h2 yanındaki ölçü çizgisi süsü — turuncunun tek dekoratif kullanımı */
.bolum-basi { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.bolum-basi h2 { margin: 0; }
.bolum-basi::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--turuncu) 0 8px, transparent 8px 16px);
}
.bolum--koyu .bolum-basi::after { background: repeating-linear-gradient(to right, #FFC58A 0 8px, transparent 8px 16px); }

.izgara { display: grid; gap: 16px; }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- 3. buton ---------- */
.dugme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--f-baslik); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
}
.dugme--birincil { background: var(--turuncu); color: #fff; }
.dugme--birincil:hover { background: var(--turuncu-koyu); color: #fff; }
.dugme--ikincil { background: transparent; color: var(--lacivert); border-color: var(--cizgi-koyu); }
.dugme--ikincil:hover { border-color: var(--lacivert); color: var(--lacivert); }
.bolum--koyu .dugme--ikincil { color: #fff; border-color: rgba(255,255,255,.45); }

/* ---------- 4. acil şerit ---------- */
.acil {
  background: var(--kirmizi); color: #fff;
  font-size: .875rem; padding-block: 8px;
}
.acil .kap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.acil a { color: #fff; font-weight: 600; }
.acil strong { font-family: var(--f-baslik); }

/* ---------- 5. üst menü ---------- */
.ust { border-bottom: 1px solid var(--cizgi); background: var(--kagit); position: sticky; top: 0; z-index: 40; }
.ust .kap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.ust__logo img { height: 40px; width: auto; display: block; }
/* üst menü artık düz yazı — küre hero'da, mükerrer amblem olmasın */
.ust__ad { font-family: var(--f-baslik); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--lacivert); line-height: 1; }
.ust__ad span { color: var(--turuncu); font-weight: 600; }
.ust nav { margin-inline-start: auto; }
.ust nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ust nav a {
  color: var(--metin); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding-block: 6px; border-bottom: 2px solid transparent;
}
.ust nav a:hover, .ust nav a[aria-current="page"] { color: var(--metin); border-bottom-color: var(--turuncu); }

.dil { position: relative; }
.dil summary { list-style: none; cursor: pointer; font-family: var(--f-veri); font-size: .8rem; font-weight: 600; padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: var(--r); }
.dil summary::-webkit-details-marker { display: none; }
.dil ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r);
  list-style: none; margin: 0; padding: 6px 0; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.dil li a { display: block; padding: 6px 14px; text-decoration: none; color: var(--metin); font-size: .9rem; }
.dil li a:hover { background: var(--kagit-alt); }

@media (max-width: 860px) {
  .ust .kap { flex-wrap: wrap; min-height: 0; padding-block: 12px; gap: 12px; }
  .ust nav { margin-inline-start: 0; width: 100%; order: 3; }
  .ust nav ul { gap: 14px; }
  .dil { margin-inline-start: auto; }
}

/* ---------- 6. hero ---------- */
.hero { padding-block: clamp(32px, 5vw, 64px); }
.hero .kap { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
.hero p.alt { font-size: 1.125rem; color: var(--metin-ikincil); max-width: 52ch; }
.hero__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__kure { justify-self: center; }
.hero__kure img { width: min(260px, 60vw); }
@media (max-width: 860px) { .hero .kap { grid-template-columns: 1fr; } .hero__kure { order: -1; } }

/* ---------- 7. sayı duvarı ---------- */
.duvar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--cizgi); }
/* KPI duvarı: 300px taban → 1120px'de 3+3. Dar hücrede "1.389.320" ve
   "22,3 milyar ₺" taşıyordu. İş grubu şeridi dar kalır, orada 12 hücre var. */
.duvar--genis { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.duvar > div { padding: 18px 20px; border-inline-start: 1px solid var(--cizgi); }
.duvar > div:first-child { border-inline-start: 0; }
.duvar b {
  display: block; font-family: var(--f-baslik); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--lacivert);
}
.duvar span { display: block; margin-top: 6px; }
@media (max-width: 620px) {
  .duvar > div { border-inline-start: 0; border-top: 1px solid var(--cizgi); }
  .duvar > div:first-child { border-top: 0; }
}

/* ---------- 8. süreç şeridi ---------- */
.surec { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; counter-reset: adim; margin: 0; padding: 0; }
.surec > li { list-style: none; border-top: 3px solid var(--lacivert); padding-top: 14px; counter-increment: adim; }
.surec > li:last-child { border-top-color: var(--turuncu); }
.surec > li::before {
  content: counter(adim, decimal-leading-zero);
  font-family: var(--f-veri); font-size: .7rem; font-weight: 600; color: var(--metin-ikincil);
  display: block; margin-bottom: 4px;
}
.surec h3 { font-size: 1rem; margin-bottom: 4px; }
.surec p { font-size: .9rem; color: var(--metin-ikincil); margin: 0; }

/* ---------- 9. kartlar ---------- */
.kart {
  border: 1px solid var(--cizgi); border-radius: var(--r); padding: 20px;
  background: var(--kagit); display: flex; flex-direction: column; gap: 8px;
}
.kart:hover { border-color: var(--cizgi-koyu); }
.kart h3 { margin: 0; }
.kart p { margin: 0; font-size: .92rem; color: var(--metin-ikincil); }
.kart__sure { margin: 0; font-size: .8rem; color: var(--metin-ikincil); letter-spacing: .02em; }
.kart__cta { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.kart--one { border-color: var(--turuncu); border-top-width: 3px; }

/* vaka kartı */
.vaka { border: 1px solid var(--cizgi); border-radius: var(--r); padding: 20px; background: var(--kagit); }
/* sektör görseli — soyut teknik çizim, proje fotoğrafı değil.
   Renk SVG'nin içinde sabit (#8FAAD0 + turuncu ölçü); koyu bölüme göre seçildi. */
.vaka__gorsel { display: block; width: 100%; height: auto; margin: -4px 0 12px; opacity: .9; }
.vaka__ikn { font-family: var(--f-veri); font-size: .75rem; color: var(--metin-ikincil); }
.vaka h3 { margin: 6px 0; font-size: 1.05rem; }
.vaka__idare { font-size: .85rem; color: var(--metin-ikincil); margin: 0 0 10px; }
/* yapı ailesi listesi — altyapı/üstyapı kartlarının içi */
.yapi { list-style: none; margin: 12px 0 0; padding: 0; }
.yapi li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--cizgi); font-size: .92rem; }
.yapi b { font-family: var(--f-veri); font-variant-numeric: tabular-nums; }
.vaka__tutar { font-family: var(--f-veri); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--lacivert); }

/* rozet */
.rozet {
  display: inline-block; font-family: var(--f-veri); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r);
  border: 1px solid currentColor; white-space: nowrap;
}
.rozet--sonuc  { color: var(--yesil); }
.rozet--ekap   { color: var(--lacivert); }
.rozet--vurgu  { color: var(--turuncu-koyu); background: var(--turuncu-soluk); border-color: #F6C899; }

/* ---------- 10. logo şeridi ---------- */
.seri { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; list-style: none; margin: 0; padding: 0; }
.seri li { font-family: var(--f-baslik); font-weight: 700; font-size: 1.05rem; color: var(--metin-ikincil); }

/* ---------- 10b. ön analiz formu ---------- */
.form__izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.alan--genis { grid-column: 1 / -1; }
.alan { display: block; }
.alan > span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--metin-ikincil); }
.alan > span b { color: var(--turuncu-koyu); }
.alan input, .alan select, .alan textarea {
  font: inherit; width: 100%; padding: 10px 12px; background: var(--kagit);
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r); color: var(--metin);
}
.alan textarea { resize: vertical; }
.alan :is(input, select, textarea):focus-visible { outline: 2px solid var(--turuncu); outline-offset: 1px; }

/* bal küpü — ekran dışına alınır; display:none olsa bot da atlardı */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.birak {
  margin-top: 24px; padding: 28px; text-align: center;
  border: 2px dashed var(--cizgi-koyu); border-radius: var(--r); background: var(--kagit-alt);
}
.birak p { margin: 0 0 4px; }
.birak__alt { font-size: .82rem; color: var(--metin-ikincil); margin-bottom: 14px; }
.birak--aktif { border-color: var(--turuncu); background: var(--turuncu-soluk); }

.kuyruk { list-style: none; margin: 14px 0 0; padding: 0; }
.kuyruk__satir {
  display: grid; gap: 10px; align-items: center; padding: 8px 0;
  grid-template-columns: minmax(0, 1fr) auto 120px auto; border-top: 1px solid var(--cizgi);
}
.kuyruk__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.kuyruk__boy { font-family: var(--f-veri); font-size: .78rem; color: var(--metin-ikincil); }
.kuyruk__cubuk { display: block; height: 6px; background: var(--cizgi); border-radius: 3px; overflow: hidden; }
.kuyruk__cubuk i { display: block; height: 100%; width: 0; background: var(--turuncu); transition: width .2s; }
.kuyruk__sil { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--metin-ikincil); }

.form__kvkk { font-size: .82rem; color: var(--metin-ikincil); margin-top: 20px; }
.form__durum { margin-inline-start: 12px; font-size: .88rem; color: var(--metin-ikincil); }
.form__uyari { padding: 14px 16px; background: var(--turuncu-soluk); border: 1px solid #F6C899; border-radius: var(--r); }
.form__sonuc { margin-top: 24px; padding: 24px; border: 1px solid var(--yesil); border-radius: var(--r); }
.form__ref code { font-size: 1.1rem; font-weight: 600; }

@media (max-width: 620px) {
  .kuyruk__satir { grid-template-columns: minmax(0, 1fr) auto auto; }
  .kuyruk__cubuk { grid-column: 1 / -1; }
}

/* ---------- 11. referans tablosu + yapışkan filtre ---------- */
.filtre {
  position: sticky; top: 72px; z-index: 20;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 14px; margin-bottom: 16px;
}
.filtre__satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtre select, .filtre input {
  font: inherit; font-size: .9rem; padding: 8px 10px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r); background: var(--kagit); color: var(--metin);
}
.filtre input { flex: 1 1 220px; min-width: 0; }
.filtre__sayac { font-family: var(--f-veri); font-size: .8rem; color: var(--metin-ikincil); margin-inline-start: auto; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cipler:empty { display: none; }
.cip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; padding: 4px 6px 4px 10px; border-radius: var(--r);
  background: var(--turuncu-soluk); color: var(--turuncu-koyu); border: 1px solid #F6C899;
}
.cip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }

.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r); }
table.g3 { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.g3 th {
  text-align: start; background: var(--lacivert); color: #fff;
  font-family: var(--f-veri); font-size: .7rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; white-space: nowrap;
}
table.g3 td { padding: 10px 12px; border-top: 1px solid var(--cizgi); vertical-align: top; }
table.g3 tbody tr:nth-child(even) { background: var(--kagit-alt); }
table.g3 td.sayi { text-align: end; }
.bos { padding: 32px; text-align: center; color: var(--metin-ikincil); }

/* ---------- 11b. dağılım çubuğu (kümülatif vitrin) ---------- */
.dagilim { list-style: none; margin: 0; padding: 0; }
.dagilim li {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem;
  align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cizgi);
}
.dagilim li:last-child { border-bottom: 0; }
.dagilim__ad { font-size: .92rem; }
.dagilim__cubuk {
  display: block; height: 5px; margin-top: 5px; border-radius: 2px;
  background: var(--lacivert); min-width: 2px;
}
.dagilim li:first-child .dagilim__cubuk { background: var(--turuncu); }
.dagilim__n { font-family: var(--f-veri); font-variant-numeric: tabular-nums; text-align: end; font-weight: 600; }

/* ---------- 12. çıktı galerisi ---------- */
.galeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.galeri figure { margin: 0; border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; background: var(--kagit); }
.galeri figcaption { padding: 10px 12px; font-size: .8rem; color: var(--metin-ikincil); border-top: 1px solid var(--cizgi); }

/* ---------- 13. footer ---------- */
.dip { background: var(--lacivert-koyu); color: #C9D4E4; padding-block: 40px 24px; font-size: .9rem; }
.dip a { color: #FFC58A; text-decoration: none; }
.dip a:hover { text-decoration: underline; }
.dip h4 { font-family: var(--f-baslik); color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.dip ul { list-style: none; margin: 0; padding: 0; }
.dip li { margin-bottom: 6px; }
.dip__izgara { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dip__logo img { height: 44px; }
.dip__unvan { font-size: .8rem; color: #8FA2BD; margin-top: 10px; max-width: 34ch; }
.dip__son { border-top: 1px solid rgba(255,255,255,.15); margin-top: 28px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .8rem; color: #8FA2BD; }

/* ---------- 14. yardımcılar ---------- */
.gizli-gorsel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.atla { position: absolute; inset-inline-start: -9999px; }
.atla:focus { inset-inline-start: var(--pay); top: 8px; z-index: 100; background: #fff; padding: 10px 14px; border: 2px solid var(--turuncu); }

@media print {
  .acil, .ust, .filtre, .hero__kure { display: none; }
  body { font-size: 11pt; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}