/* Bu dosya docs/mockups/ornek-rapor-terminal-defteri.html içindeki ONAYLI
   mockup'tan birebir taşınmıştır (3 Eylül 2026, spec §9). Sınıf adları
   mockup'la birebir eşleşir. Buradaki bir değeri değiştirmek
   test/report-visual.test.js'i kırar — mockup da güncellenmeden değişiklik
   yapılmaz. */
/* ======================================================================
   PRESS EARTH — ÖRNEK RAPOR — "TERMİNAL DEFTERİ"
   Zemin beyaz, yapı görünür hatlarla kurulur, veri mono ile yazılır.
   Tek vurgu rengi (kırmızı) yalnız üç yerde: başlıktaki son kelime,
   kademe etiketi, birincil buton.
   ====================================================================== */
:root{
  /* Palet landing'in kendi belirteçlerinden (src/assets/css/styles.css)
     türetilmiştir: rapor sayfası nötr siyah yerine markanın lacivert-mavi
     ailesini kullanır. Vurgu rengi kırmızı KALIR — landing paletinde de var
     (--pe-red) ve lacivert zemin üzerinde en keskin ayrışan renk odur. */
  --bg:#ffffff;          /* kayıt kağıdı */
  --bg2:#f5f8ff;         /* bant zemini, landing'in soğuk zemini */
  --ink:#060b33;         /* mürekkep — --pe-navy */
  --ink2:#66708a;        /* ikincil — --pe-muted */
  --rule:#060b33;        /* yapısal hat */
  --hair:#dfe7fb;        /* saç teli hat — --pe-border */
  --sig:#ed2f38;         /* sinyal — --pe-red */
  /* Koyu kapanış bloğunun üzerindeki tonlar. Eski nötr griler lacivert
     zeminde çamurlaşıyordu; bunlar aynı laciverte mavi tarafından yaklaşır. */
  --on-ink:#8e99bd;      /* ikincil yazı */
  --on-ink-2:#c3cce6;    /* gövde yazısı */
  --on-ink-line:#2a3160; /* çerçeve */
  --shell:1440px;
  --pad:clamp(16px,2.4vw,30px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Archivo","Noto Sans Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Arapça: Archivo Arap harflerini kapsamaz — sistem/Noto yedeğine düşer.
     H1'in daraltılmış karakteri ar sürümünde korunmaz, kabul edilen sınır. */
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.shell{max-width:var(--shell);margin:0 auto;border-inline:1px solid var(--hair)}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink2)}

/* ---------- üst bant ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px var(--pad);border-bottom:2px solid var(--rule)}
.top-id{display:flex;align-items:center;gap:10px;min-width:0}
.top-id .dot{width:6px;height:6px;background:var(--sig);border-radius:50%;flex:0 0 auto}
.top-act{display:flex;align-items:center;gap:8px}
.ghost{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--hair);padding:8px 12px;color:var(--ink2);background:none;cursor:pointer}
.ghost:hover{border-color:var(--ink);color:var(--ink)}
.solid{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--sig);color:#fff;padding:9px 14px;border:1px solid var(--sig)}
.solid:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- künye şeridi ---------- */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.strip>div{padding:clamp(14px,2vw,24px) var(--pad);border-inline-end:1px solid var(--hair)}
.strip>div:last-child{border-inline-end:0}
.strip b{display:block;font-weight:900;font-size:clamp(26px,3.4vw,46px);line-height:.95;letter-spacing:-.045em}
.strip .lbl{display:block;margin-top:9px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(280px,.86fr);border-bottom:2px solid var(--rule)}
.hero-l{padding:clamp(26px,4vw,58px) var(--pad) clamp(28px,4vw,56px);border-inline-end:1px solid var(--hair);min-width:0}
.h1{margin:0;font-weight:900;font-size:clamp(46px,9.6vw,105px);line-height:.96;letter-spacing:-.05em;
  text-transform:uppercase;text-wrap:balance}
.h1 em{font-style:normal;color:var(--sig)}
.h1-sub{margin:clamp(20px,2.6vw,30px) 0 0;max-width:52ch;font-size:clamp(15px,1.25vw,17px);color:var(--ink2)}
.h1-sub b{color:var(--ink);font-weight:600}
.hero-r{display:flex;flex-direction:column;min-width:0}
.rec{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px var(--pad);border-bottom:1px solid var(--hair)}
.rec:last-child{border-bottom:0}
.rec span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.rec b{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;text-align:end;overflow-wrap:anywhere}
.rec .live{color:var(--sig)}
.verify{border-bottom:1px solid var(--hair)}
.verify:hover{border-color:var(--ink)}

/* ---------- bantlar ---------- */
.band-h{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px var(--pad);border-bottom:1px solid var(--hair)}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));grid-auto-rows:minmax(0,auto);border-bottom:2px solid var(--rule)}
.cell{display:flex;align-items:center;justify-content:center;min-width:0;min-height:124px;padding:26px 22px;
  border-inline-end:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--bg)}
.cells.se{grid-template-columns:repeat(5,minmax(0,1fr))}
.cells.se .cell{min-height:104px;background:var(--bg2)}
@media (max-width:820px){.cells.se{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.logo{flex:0 1 auto;max-width:100%;background:var(--ink);
  -webkit-mask:var(--u) no-repeat center/contain;mask:var(--u) no-repeat center/contain}
/* Arama yüzeyi hücresindeki logo artık bir BAĞLANTININ içinde (hücre o
   yüzeyin arama sonucuna gider). .logo bir <span>'dir ve ölçüsünü inline
   style ile alır; doğrudan .cell'in (flex kabı) çocuğuyken flex item olarak
   bloklaşıyor ve genişlik/yükseklik uygulanıyordu. Araya <a> girince span
   normal inline elemana döndü, ölçüler yok sayıldı ve maske 0x0 kalarak
   GÖRÜNMEZ oldu. Bağlantıyı da flex kabı yapmak eski davranışı aynen
   geri getirir. */
.cells.se .cell>a{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%;color:inherit;text-decoration:none}
.se-word{font-weight:700;font-size:clamp(19px,2vw,26px);letter-spacing:-.03em}
/* Yalnız `.js` işaretliyken saydam başlar (bkz. src/report.html <head>) —
   JS engellenmiş/kapalıysa bant hiç saydamlaşmaz, 17 hücre baştan görünür. */
.js .reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.2,1)}

/* ---------- liste ---------- */
.list-h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:clamp(22px,3vw,38px) var(--pad) 16px}
.list-h h2{margin:0;font-weight:900;font-size:clamp(22px,2.7vw,34px);letter-spacing:-.04em;text-transform:uppercase}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 var(--pad) 14px}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--hair);padding:9px 12px;flex:1 1 240px;max-width:340px}
.search input{border:0;outline:0;background:none;width:100%;font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--ink)}
.search svg{width:14px;height:14px;flex:0 0 auto;stroke:var(--ink2);fill:none;stroke-width:1.9}
/* Sarmalayıcı yalnız mobilde bir kutu olur; masaüstünde `display:contents`
   ile layout'tan tamamen çekilir, çipler .tools'un doğrudan flex öğesi kalır. */
.chips{display:contents}
.chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);padding:9px 12px;background:none;color:var(--ink2);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--ink);color:#fff}
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--rule)}
/* table-layout:fixed + sabit kolon oranları — auto layout, o an DOM'da
   görünür TÜM satırların içeriğine göre kolon genişliği hesaplıyordu; bu
   paket/dil/arama filtresine göre farklı genişlik demekti ve mockup'ın
   15 satırı ile üretilen sayfanın (sayfalanmış) 50 görünür satırı arasında
   piksel kilidini kıran bir kaymaya yol açıyordu (Görev 7, Düzeltme turu 1).
   Oranlar mockup'ın onaylı masaüstü genişliklerinden (1438px'te ölçülen
   [80,410,258,272,244,174]) türetildi, toplamı %100. */
table{width:100%;border-collapse:collapse;min-width:760px;color:var(--ink);table-layout:fixed}
thead th:nth-child(1){width:5.56%}
thead th:nth-child(2){width:28.51%}
thead th:nth-child(3){width:17.94%}
thead th:nth-child(4){width:18.92%}
thead th:nth-child(5){width:16.97%}
thead th:nth-child(6){width:12.10%}
thead th{position:sticky;top:0;z-index:2;background:var(--bg);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);text-align:end;padding:11px var(--pad);
  border-bottom:1px solid var(--rule);white-space:nowrap}
thead th.s{text-align:start}
tbody td{padding:13px var(--pad);border-bottom:1px solid var(--hair);text-align:end;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;white-space:nowrap}
tbody tr:hover td{background:var(--bg2)}
tbody td.s{text-align:start;white-space:normal}
.grp td{text-align:start;padding:10px var(--pad);background:var(--bg2);border-bottom:1px solid var(--hair);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sig)}
.ix{color:var(--ink2);font-size:11px;width:1%}
/* min-width kaldırıldı: table-layout:fixed'de kolon genişliğini hücre
   min-width'i değil yukarıdaki thead th:nth-child(2) oranı belirliyor; en
   dar tablo genişliğinde (760px) bile %28.51 = ~217px, eski 210px sınırının
   üstünde — kural artık etkisiz olurdu, kaldırıldı. */
/* Mecra adı: linki olan kayıtlarda <a class="out-link">, olmayanlarda <b>.
   İkisi de AYNI görünür — tasarım linkin varlığına göre değişmez, yalnız
   tıklanabilirlik eklenir (üzerine gelince altı çizilir). */
.out b,.out .out-link{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:-.015em;
  text-transform:uppercase;line-height:1.25}
.out .out-link{color:inherit;text-decoration:none}
.out .out-link:hover,.out .out-link:focus-visible{text-decoration:underline;text-underline-offset:2px}
.out span{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink2);margin-top:2px}
.auth{display:flex;align-items:center;justify-content:flex-end;gap:11px}
.bar{width:46px;height:9px;background:var(--hair);position:relative;flex:0 0 auto}
.bar i{position:absolute;inset:0;width:var(--p);background:var(--ink)}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px var(--pad) clamp(26px,3.4vw,44px);border-bottom:2px solid var(--rule)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px var(--pad);border-bottom:1px solid var(--hair)}
.pager-pages{display:flex;align-items:stretch;gap:0;border:1px solid var(--hair)}
.pager-pages button{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  min-width:34px;padding:8px 10px;background:none;border:0;border-inline-end:1px solid var(--hair);
  color:var(--ink2);cursor:pointer}
.pager-pages button:last-child{border-inline-end:0}
.pager-pages button:hover{color:var(--ink);background:var(--bg2)}
.pager-pages button[aria-current="page"]{background:var(--ink);color:#fff}
.pager-pages button[disabled]{opacity:.35;cursor:default}
.pager-pages .gap{padding:8px 6px;color:var(--ink2);font-family:"IBM Plex Mono",monospace;font-size:11px;
  border-inline-end:1px solid var(--hair);display:flex;align-items:center}

/* ---------- kapanış ---------- */
.close{background:var(--ink);color:#fff;padding:clamp(34px,5vw,74px) var(--pad)}
.close .lbl{color:var(--on-ink)}
.close h2{margin:14px 0 0;font-weight:900;font-size:clamp(30px,5.4vw,72px);line-height:.98;
  letter-spacing:-.045em;text-transform:uppercase;max-width:17ch}
.close p{margin:18px 0 0;max-width:56ch;color:var(--on-ink-2);font-size:clamp(14.5px,1.2vw,16.5px)}
.close-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,38px)}
.close .solid{padding:13px 20px;font-size:11.5px}
.close .ghost{border-color:var(--on-ink-line);color:var(--on-ink-2);padding:12px 18px;font-size:11.5px}
.close .ghost:hover{border-color:#fff;color:#fff}
.price{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-l{border-inline-end:0;border-bottom:1px solid var(--hair)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip>div:nth-child(2n){border-inline-end:0}
  .strip>div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media (max-width:700px){
  /* Mobilde 12 logo 12 satır oluyordu — iki kolona düşer, son dördü gizlenir. */
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell{min-height:94px;padding:18px 14px}
  .cells:not(.se) .cell:nth-child(n+9){display:none}

  /* Arama yüzeyleri iki kolonda üç satır (~280px) kaplıyordu. Tek satırlık
     yatay kaydırmaya alındı: bant üçte birine iner, beş yüzeyin hepsi
     erişilebilir kalır. Hücre genişliği %46 — ikiden fazlası göründüğü için
     kaydırılabildiği kendini belli eder. */
  .cells.se{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cells.se::-webkit-scrollbar{display:none}
  .cells.se .cell{flex:0 0 46%;scroll-snap-align:start;min-height:78px;padding:14px 12px}
  .cells.se .cell:last-child{border-inline-end:0}
  .se-word{font-size:17px}

  /* Filtre araç çubuğu dört satıra yayılıyordu (arama + üç uzun çip).
     Arama tam genişlik tek satır, çipler tek satırlık yatay kaydırma. */
  /* min-width:0 şart: flex öğesi varsayılan olarak içeriğinin altına
     küçülmez, çip şeridi kutuyu 610px'e kadar şişirip sayfayı yatay
     taşırıyordu. Sıfırlanınca şerit kendi içinde kayar. */
  .tools{flex-direction:column;align-items:stretch;gap:10px;min-width:0}
  .search{max-width:none;flex:1 1 auto;min-width:0}
  .chips{display:flex;gap:6px;width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap;font-size:10px;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
}