/* gecmis.css — geçmiş aktarımı ekranları (Plan 3 Task 21; design/web_gecmis-showcase/gecmis.css + v07-bolunmus-duvar.html (wg7) + v01 şerit/talep).
   `.gk-*` ve `.g7-*` sınıflarının TEK sahibi bu dosyadır. Renk YALNIZ takma adlardan (var(--…)/color-mix); ham renk YOK. Satır içi stil YOK
   (CSP style-src 'self'): çubuk genişlikleri `p-0 … p-100`, iskelet/hayal genişlikleri sınıflarla. Koyu: showcase `[data-theme="dark"]` yerine
   `:root[data-tema="koyu"]` + sistem-koyu (`prefers-color-scheme`, data-tema açık değilken) ikilisi. */

/* ---- İlerleme halkası (SVG) ------------------------------------------------------------------------------ */
.gk-halka { position: relative; display: inline-grid; place-items: center; flex: none; }
.gk-halka svg { display: block; transform: rotate(-90deg); }
.gk-halka .iz { stroke: var(--line-soft); fill: none; }
.gk-halka .dolu { stroke: var(--primary); fill: none; stroke-linecap: round; }
.gk-halka.durdu .dolu { stroke: var(--presence-away); }
.gk-halka.hata .dolu { stroke: var(--presence-dnd); }
.gk-halka .ic { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* ---- Doğrusal çubuk -------------------------------------------------------------------------------------- */
.gk-cubuk { height: 8px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; position: relative; }
.gk-cubuk > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--primary); }
.gk-cubuk--ince { height: 4px; }
.gk-cubuk.durdu > i { background: var(--presence-away); }
.gk-cubuk.hata > i { background: var(--presence-dnd); }
.gk-cubuk > i.p-0{width:0%} .gk-cubuk > i.p-1{width:1%} .gk-cubuk > i.p-2{width:2%} .gk-cubuk > i.p-3{width:3%} .gk-cubuk > i.p-4{width:4%} .gk-cubuk > i.p-5{width:5%}
.gk-cubuk > i.p-6{width:6%} .gk-cubuk > i.p-7{width:7%} .gk-cubuk > i.p-8{width:8%} .gk-cubuk > i.p-9{width:9%} .gk-cubuk > i.p-10{width:10%} .gk-cubuk > i.p-11{width:11%}
.gk-cubuk > i.p-12{width:12%} .gk-cubuk > i.p-13{width:13%} .gk-cubuk > i.p-14{width:14%} .gk-cubuk > i.p-15{width:15%} .gk-cubuk > i.p-16{width:16%} .gk-cubuk > i.p-17{width:17%}
.gk-cubuk > i.p-18{width:18%} .gk-cubuk > i.p-19{width:19%} .gk-cubuk > i.p-20{width:20%} .gk-cubuk > i.p-21{width:21%} .gk-cubuk > i.p-22{width:22%} .gk-cubuk > i.p-23{width:23%}
.gk-cubuk > i.p-24{width:24%} .gk-cubuk > i.p-25{width:25%} .gk-cubuk > i.p-26{width:26%} .gk-cubuk > i.p-27{width:27%} .gk-cubuk > i.p-28{width:28%} .gk-cubuk > i.p-29{width:29%}
.gk-cubuk > i.p-30{width:30%} .gk-cubuk > i.p-31{width:31%} .gk-cubuk > i.p-32{width:32%} .gk-cubuk > i.p-33{width:33%} .gk-cubuk > i.p-34{width:34%} .gk-cubuk > i.p-35{width:35%}
.gk-cubuk > i.p-36{width:36%} .gk-cubuk > i.p-37{width:37%} .gk-cubuk > i.p-38{width:38%} .gk-cubuk > i.p-39{width:39%} .gk-cubuk > i.p-40{width:40%} .gk-cubuk > i.p-41{width:41%}
.gk-cubuk > i.p-42{width:42%} .gk-cubuk > i.p-43{width:43%} .gk-cubuk > i.p-44{width:44%} .gk-cubuk > i.p-45{width:45%} .gk-cubuk > i.p-46{width:46%} .gk-cubuk > i.p-47{width:47%}
.gk-cubuk > i.p-48{width:48%} .gk-cubuk > i.p-49{width:49%} .gk-cubuk > i.p-50{width:50%} .gk-cubuk > i.p-51{width:51%} .gk-cubuk > i.p-52{width:52%} .gk-cubuk > i.p-53{width:53%}
.gk-cubuk > i.p-54{width:54%} .gk-cubuk > i.p-55{width:55%} .gk-cubuk > i.p-56{width:56%} .gk-cubuk > i.p-57{width:57%} .gk-cubuk > i.p-58{width:58%} .gk-cubuk > i.p-59{width:59%}
.gk-cubuk > i.p-60{width:60%} .gk-cubuk > i.p-61{width:61%} .gk-cubuk > i.p-62{width:62%} .gk-cubuk > i.p-63{width:63%} .gk-cubuk > i.p-64{width:64%} .gk-cubuk > i.p-65{width:65%}
.gk-cubuk > i.p-66{width:66%} .gk-cubuk > i.p-67{width:67%} .gk-cubuk > i.p-68{width:68%} .gk-cubuk > i.p-69{width:69%} .gk-cubuk > i.p-70{width:70%} .gk-cubuk > i.p-71{width:71%}
.gk-cubuk > i.p-72{width:72%} .gk-cubuk > i.p-73{width:73%} .gk-cubuk > i.p-74{width:74%} .gk-cubuk > i.p-75{width:75%} .gk-cubuk > i.p-76{width:76%} .gk-cubuk > i.p-77{width:77%}
.gk-cubuk > i.p-78{width:78%} .gk-cubuk > i.p-79{width:79%} .gk-cubuk > i.p-80{width:80%} .gk-cubuk > i.p-81{width:81%} .gk-cubuk > i.p-82{width:82%} .gk-cubuk > i.p-83{width:83%}
.gk-cubuk > i.p-84{width:84%} .gk-cubuk > i.p-85{width:85%} .gk-cubuk > i.p-86{width:86%} .gk-cubuk > i.p-87{width:87%} .gk-cubuk > i.p-88{width:88%} .gk-cubuk > i.p-89{width:89%}
.gk-cubuk > i.p-90{width:90%} .gk-cubuk > i.p-91{width:91%} .gk-cubuk > i.p-92{width:92%} .gk-cubuk > i.p-93{width:93%} .gk-cubuk > i.p-94{width:94%} .gk-cubuk > i.p-95{width:95%}
.gk-cubuk > i.p-96{width:96%} .gk-cubuk > i.p-97{width:97%} .gk-cubuk > i.p-98{width:98%} .gk-cubuk > i.p-99{width:99%} .gk-cubuk > i.p-100{width:100%}

/* ---- İskelet (senkron olmayan sohbet satırı) -------------------------------------------------------------- */
.gk-cizgi { display: block; height: 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--line) 80%, transparent); }
.gk-cizgi--kisa { width: 46%; } .gk-cizgi--uzun { width: 78%; }
.satir.gk-yukleniyor .onizle { color: var(--muted); font-style: italic; font-weight: var(--fw-semi); }
.satir.gk-yukleniyor .av { opacity: .55; }
.satir.gk-yukleniyor .ad { color: var(--sub); }
.satir.gk-iskelet .av-iskelet { width: 48px; height: 48px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--line) 80%, transparent); }
.satir.gk-iskelet .govde { gap: 9px; }
.gk-nokta-yuk { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--line); border-top-color: var(--primary); display: inline-block; }

/* ---- Telefon ↔ tarayıcı illüstrasyonu (renkli emoji, katmanlı kart) ---------------------------------------- */
.gk-illus { display: flex; align-items: center; gap: 0; }
.gk-illus .kart { width: 104px; height: 104px; border-radius: 28px; display: grid; place-items: center; font-size: 54px; line-height: 1;
  background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--shadow-md), var(--shadow-ic); position: relative; }
.gk-illus .kart .rozet-k { position: absolute; right: -8px; bottom: -8px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gk-illus .hat { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gk-illus .hat i { display: block; width: 100%; height: 0; border-top: 3px dotted var(--primary); }
.gk-illus .hat span { font-size: var(--fs-micro); font-weight: var(--fw-x); color: var(--primary-deep); }
.gk-illus.durdu .hat i { border-top-color: var(--presence-away); width: 30%; }
.gk-illus.durdu .hat { flex-direction: row; justify-content: center; gap: 10px; }
.gk-illus.durdu .hat span { color: var(--gold-ink); }
.gk-illus.hata .hat i { border-top-color: var(--presence-dnd); width: 30%; }
.gk-illus.hata .hat { flex-direction: row; justify-content: center; gap: 10px; }
.gk-illus.hata .hat span { color: var(--danger-deep); }
.gk-illus.durdu .kart.tel, .gk-illus.hata .kart.tel { filter: grayscale(.6); }

/* ---- Sohbet açıkken eski mesaj yer tutucusu ------------------------------------------------------------------ */
.gk-onceki { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--sheet); color: var(--sub); font-size: var(--fs-cap); font-weight: var(--fw-bold); box-shadow: var(--shadow-balon); border: 0; font-family: inherit; }
.gk-onceki--dugme { cursor: pointer; color: var(--primary-deep); }
.gk-onceki--dugme:focus-visible, .gk-secenek:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }
.gk-onceki .ik { width: 16px; height: 16px; }
.gk-bosluk { align-self: stretch; margin: 2px 0 8px; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px dashed color-mix(in srgb, var(--sub) 35%, transparent);
  background: color-mix(in srgb, var(--sheet) 55%, transparent); display: flex; flex-direction: column; gap: 10px; }
.gk-bosluk .bas { display: flex; align-items: center; gap: 8px; font-size: var(--fs-cap); font-weight: var(--fw-bold); color: var(--sub); }
.gk-bosluk .bas .ik { width: 16px; height: 16px; }
.gk-bosluk .sira { display: flex; }
.gk-bosluk .sira.sag { justify-content: flex-end; }
.gk-bosluk .hayal { height: 30px; border-radius: var(--r-balon); background: color-mix(in srgb, var(--line) 70%, transparent); }
.gk-bosluk .hayal--42 { width: 42%; } .gk-bosluk .hayal--30 { width: 30%; } .gk-bosluk .hayal--55 { width: 55%; }

/* ---- Geçmiş talep akışı (aralık seçimi) ---------------------------------------------------------------------- */
.gk-talep-kart { width: 460px; max-width: calc(100% - 32px); text-align: left; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md), var(--shadow-ic); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.gk-talep-kart h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-x); }
.gk-talep-kart p { margin: 0; font-size: var(--fs-sub); color: var(--sub); }
.gk-talep-kart .eylemler { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.gk-talep { display: flex; flex-direction: column; gap: 8px; }
.gk-secenek { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--sheet);
  font-size: var(--fs-sub); color: var(--ink); cursor: pointer; }
.gk-secenek .yuvar { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.gk-secenek.secili { border-color: var(--primary-tint); background: var(--primary-soft); color: var(--on-primary-soft); font-weight: var(--fw-bold); }
.gk-secenek.secili .yuvar { border: 5px solid var(--primary-deep); background: var(--sheet); }
.gk-secenek .ek { margin-left: auto; font-size: var(--fs-micro); color: var(--muted); font-weight: var(--fw-semi); }
.gk-secenek.secili .ek { color: var(--on-primary-soft); }
.gk-not { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-cap); color: var(--sub); }
.gk-not .ik { width: 16px; height: 16px; margin-top: 2px; color: var(--primary-deep); flex: none; }

/* Boş sohbet alanında talep kartını ortalar (kart `.gk-talep-kart`). */
.gk-talep-sahne { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; }

/* ---- Liste üstü şerit (wa1 .serit + geçmiş) ------------------------------------------------------------------ */
.serit.gk-serit { align-items: center; }
.serit.gk-serit .ikon-btn { margin: 0; }
.gk-serit .simge { background: var(--sheet); }
.gk-serit .simge--yesil { background: var(--primary-soft); }
/* aciklama satırı: yüzde kalın */
.gk-serit .aciklama .yuzde { font-size: var(--fs-micro); font-weight: var(--fw-x); color: var(--ink); }
.gk-serit .gk-cubuk { margin-top: 7px; }
.gk-serit .wa-eylem { margin-top: 8px; display: flex; gap: 8px; }
.gk-serit .btn { flex: none; }
.gk-serit .simge .gk-halka { display: inline-grid; }

/* ---- İstatistik / özet ---------------------------------------------------------------------------------------- */
.gk-istat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.gk-istat div { padding: 12px 14px; border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gk-istat b { display: block; font-size: var(--fs-h2); font-weight: var(--fw-x); letter-spacing: -.3px; }
.gk-istat span { font-size: var(--fs-cap); color: var(--sub); }

/* ---- Duvar kâğıdı dolgusu (wb3 ile aynı dil: kâğıt uçak + sohbet odası duvar kâğıdı) --------------------------------- */
.gk-duvar { position: relative; overflow: hidden; background: var(--wallpaper-bg); isolation: isolate; }
.gk-duvar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/duvar-akis.webp") center top / 100% auto no-repeat; }
:root[data-tema="koyu"] .gk-duvar::before { filter: invert(1); mix-blend-mode: screen; opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .gk-duvar::before { filter: invert(1); mix-blend-mode: screen; opacity: .5; }
}
.gk-marka { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h2); font-weight: var(--fw-x); }
.gk-marka img { width: 40px; height: 40px; }
.gk-marka .web { font-size: var(--fs-cap); padding: 2px 9px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--on-primary-soft); border: 1px solid var(--primary-tint); }

/* ---- wg7 · bölünmüş duvar -------------------------------------------------------------------------------------- */
.g7 { flex: 1; min-height: 100vh; display: flex; }
.g7-sol { width: 520px; flex: none; padding: 44px 48px; display: flex; flex-direction: column; border-right: 1px solid var(--line); box-sizing: border-box; }
.g7-sol h2 { margin: auto 0 12px; font-size: calc(var(--fs-display) * 1.3); line-height: 1.15; font-weight: var(--fw-x); letter-spacing: -.8px; }
.g7-sol .slogan { margin: 0 0 24px; color: var(--sub); font-size: var(--fs-h3); }
.g7-kartlar { display: flex; flex-direction: column; gap: 10px; }
.g7-kartlar .satir { height: 62px; margin: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--sheet) 86%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.g7-kartlar .satir + .satir::before { display: none; }
.g7-etiket { margin: 0 0 8px; font-size: var(--fs-cap); font-weight: var(--fw-x); letter-spacing: .5px; text-transform: uppercase; color: var(--sub); display: flex; gap: 8px; align-items: center; }
.g7-nokta { color: var(--primary-deep); }
.g7-sag { flex: 1; min-width: 0; background: var(--sheet); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 36px 56px; text-align: center; box-sizing: border-box; }
.g7-sag h1 { margin: 0; font-size: var(--fs-display); font-weight: var(--fw-x); letter-spacing: -.5px; }
.g7-sag p { margin: 0; max-width: 460px; color: var(--sub); font-size: var(--fs-body); line-height: 1.5; }
.g7-sag p b { color: var(--ink); }
.g7-merkez { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.g7-merkez img { width: 64px; height: 64px; }
.g7-merkez b { font-size: 34px; font-weight: var(--fw-x); letter-spacing: -1px; line-height: 1.1; }
.g7-eylem { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g7-eylem--sira { flex-direction: row; gap: 14px; }
.g7-eylem .not { font-size: var(--fs-cap); color: var(--muted); font-weight: var(--fw-semi); }
.g7-mini { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sub); font-weight: var(--fw-bold); color: var(--gold-ink); }
.g7--hata .g7-mini { color: var(--danger-deep); }
@media (max-width: 1100px) { .g7-sol { width: 380px; padding: 32px; } .g7-sag { padding: 28px 32px; } }
@media (max-width: 820px) { .g7 { flex-direction: column; } .g7-sol { width: auto; padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); } .g7-sol h2 { margin-top: 20px; } }