/* ==========================================================================
   ip-adresi.com — CLI + PIKSEL teması

   İki katman var:
   1) CLI  — Windows komut istemi yazı tipi (Consolas), hizalı çıktı,
      kutu çizgi karakterleri, blok imleç.
   2) PIKSEL — 8-bit arayüz dili: köşesi kesik kutular, sert gölgeli butonlar,
      yuvarlatma yok, gradyan yok, her şey piksel ızgarasına oturur.
      Piksel katmanı ikonlardan ve kutu çerçevelerinden geliyor, yazı
      tipinden değil.

   Piksel kenarlık hilesi: border yerine dört yönde sert box-shadow veriyoruz.
   Gölgeler köşeleri doldurmadığı için kutular kendiliğinden "kesik köşeli"
   çıkıyor — klasik 8-bit çerçeve görünümü tek satırda.
   ========================================================================== */

:root {
  /* Piksel birimi: tüm çerçeveler, gölgeler ve boşluklar bunun katı */
  --px: 2px;
  --px2: 4px;
  --px3: 6px;

  /* Dikey ritim. Bölümler arası boşluk tek yerden yönetiliyor;
     "kompakt" ayarı bu üç değeri değiştirmekten ibaret. */
  --gap:      10px;   /* bileşen içi */
  --gap-sec:  18px;   /* bölümler arası */
  --pad-box:  12px;   /* kutu iç boşluğu */

  /* Windows komut isteminin yazı tipi. Consolas Windows 10/11'de cmd ve
     PowerShell'in varsayılanı; Lucida Console eski cmd, Terminal ise klasik
     raster font. Diğer sistemlerde yerel eşdeğerlerine düşülüyor.
     Tek bir aile kullanılıyor: başlık, buton ve terminal çıktısı aynı font. */
  /* "Courier New" ve "Terminal" bilerek YOK: Android "Courier New" adını
     serif daktilo fontuna (Cutive Mono) eşliyor — telefonlarda tırnaklı,
     geniş, zor okunan yazının sebebi buydu (2026-10-16). Android'de
     genel "monospace" Droid Sans Mono'dur; iOS'ta ui-monospace SF Mono. */
  --font-mono: Consolas, "Cascadia Mono", "Lucida Console", ui-monospace, "SF Mono",
               Menlo, Monaco, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono",
               "DejaVu Sans Mono", "Liberation Mono", monospace;
  /* Okuma metni (açıklama, SSS, etiketler) için sistem sans-serif'i.
     Consolas Windows dışında yok; Android/iOS'ta Courier benzeri bir
     yedek devreye giriyordu ve 13 px'te uzun paragraflar okunmuyordu.
     Sistem yazı tipi sıfır bayt, sıfır dış bağımlılık, Türkçe kapsamı tam.
     Terminal çıktısı, komutlar, tablolar ve girişler monospace kalıyor —
     kimlik orada. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
               Ubuntu, "Helvetica Neue", Arial, sans-serif;

  /* green — varsayılan fosfor yeşili */
  --bg:        #060a06;
  --bg-panel:  #0a100a;
  --bg-input:  #0d150d;
  --fg:        #7dfa8d;
  --fg-dim:    #478f53;   /* panel üstünde 4.88:1 */
  --fg-key:    #4fbf68;
  --accent:    #b6ff6a;
  --ok:        #46e07a;
  --warn:      #ffcf4d;
  --err:       #ff5f56;
  --head:      #d8ffcf;
  --border:    #1e4425;
  --edge-hi:   #2d6b39;   /* piksel butonun aydınlık kenarı */
  --edge-lo:   #050805;   /* piksel butonun karanlık kenarı */
  --glow:        0 0 6px rgba(125, 250, 141, 0.30);
  --glow-strong: 0 0 18px rgba(125, 250, 141, 0.35);
  --scan:      rgba(0, 0, 0, 0.22);
  --select:    rgba(125, 250, 141, 0.25);
}

/* --------------------------------------------------------------------------
   Temel
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Sayfada hiçbir yerde yuvarlak köşe yok. Tarayıcılar input, select,
   button ve arama alanlarına kendi köşe yarıçaplarını uyguluyor;
   appearance sıfırlanmadan border-radius: 0 tek başına yetmiyor. */
*,
*::before,
*::after,
input,
select,
textarea,
button {
  border-radius: 0;
}

input,
select,
textarea,
button {
  -webkit-appearance: none;
  appearance: none;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  /* Mobilde 13 px'e düşüyordu; artık 15 px taban, geniş ekranda 16,5 px.
     Hiçbir okunur metin 13 px'in altına inmiyor. */
  font-size: clamp(15px, 0.92rem + 0.25vw, 16.5px);
  line-height: 1.5;
  min-height: 100vh;
  text-shadow: var(--glow);
  overflow-x: hidden;
}

/* Piksel sanatı ve ikonlar asla yumuşatılmasın */
img, svg, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
svg { shape-rendering: crispEdges; }

::selection { background: var(--select); color: var(--head); }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: var(--px) solid var(--accent);
  outline-offset: var(--px);
}

/* --------------------------------------------------------------------------
   Yerleşim
   -------------------------------------------------------------------------- */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(14px, 2vw, 22px);
}

.screen { min-height: 100vh; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   Üst çubuk — piksel pencere başlığı
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 var(--px) 0 0 var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
}

/* Yuvarlak değil kare "pencere düğmeleri" — piksel dünyada daire yok */
.topbar__dots { display: flex; gap: var(--px2); flex: 0 0 auto; }
.topbar__dot {
  width: 10px; height: 10px;
  background: var(--fg-dim);
  box-shadow: inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 rgba(0, 0, 0, 0.45);
}
.topbar__dot--r { background: var(--err); }
.topbar__dot--y { background: var(--warn); }
.topbar__dot--g { background: var(--ok); }

.topbar__title {
  flex: 1 1 auto;
  color: var(--fg-dim);
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__title b { color: var(--fg-key); font-weight: 400; }

.topbar__nav { display: flex; gap: 14px; flex: 0 0 auto; }
.topbar__nav a {
  text-transform: uppercase;
  color: var(--fg-key);
  font-size: 0.9em;
}
.topbar__nav a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Terminal
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   HERO — sayfanın ilk gördüğü şey: ziyaretçinin IP adresi

   Terminal ne kadar sevilse de, siteye gelen kişi tek bir şey için geliyor.
   Bu yüzden IP adresi her şeyin üstünde ve ekranda okunabilecek en büyük
   öğe. Geri kalan her şey (terminal, araçlar, içerik) onun altında.
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
  margin: 14px 0 var(--gap-sec) 2px;
  padding: var(--pad-box) 16px;
  background: var(--bg-panel);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

.hero__icon { flex: 0 0 auto; display: block; line-height: 0; }
.hero__body { min-width: 0; flex: 1 1 auto; }

/* Semantik olarak sayfanın h1'i, görsel olarak küçük bir etiket:
   ekrandaki "display" öğesi başlık değil, IP adresinin kendisi. */
h1.hero__label,
.hero__label {
  text-transform: uppercase;
  color: var(--fg-key);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 var(--px2);
  line-height: 1.3;
  display: block;
}
h1.hero__label::before { content: none; }

.hero__ipwrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* IP adresi sayfadaki en büyük metin. Uzun IPv6 adresleri taşmasın diye
   hem clamp() ile ölçekleniyor hem de gerektiğinde kırılabiliyor. */
.hero__ip {
  font-size: clamp(2.05rem, 1.15rem + 4.4vw, 3.6rem);
  line-height: 1.02;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: break-all;
  text-shadow: var(--glow-strong);
}

.hero__copy {
  flex: 0 0 auto;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: var(--bg-input);
  color: var(--fg-key);
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-hi),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--edge-lo),
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.hero__copy:hover { color: var(--accent); background: var(--select); }
.hero__copy:active { transform: translate(var(--px), var(--px)); }
.hero__copy.is-done { color: var(--ok); }

.hero__meta { display: flex; flex-wrap: wrap; gap: var(--px2); margin-top: var(--px3); }

/* Etiket rozetleri */
.chip {
  font-size: 0.8rem;
  padding: var(--px) var(--px3);
  color: var(--fg);
  background: var(--bg-input);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.chip--v    { color: var(--bg); background: var(--ok); font-weight: 700; }
.chip--isp  { color: var(--fg-key); }
.chip--dim  { color: var(--fg-dim); }
.chip--warn { color: var(--warn); }

/* "tüm detaylar" bağlantısı rozet sırasının devamında durur */
.hero__more { font-size: 0.78rem; align-self: center; margin-left: var(--px2); }

/* Sağdaki özet: hizalı anahtar/değer. Terminal çıktısındaki
   "anahtar ···· değer" düzeninin kompakt HTML karşılığı. */
.hero__facts {
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--px) var(--px3);
  margin: 0;
  align-self: stretch;
  align-content: center;
  font-size: 0.8rem;
  min-width: 0;
  padding-left: 22px;
  box-shadow: inset var(--px) 0 0 0 var(--border);
}
.hero__facts dt {
  text-transform: uppercase;
  color: var(--fg-dim);
  font-size: 0.68rem;
  white-space: nowrap;
  align-self: center;
}
.hero__facts dd { margin: 0; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }

/* Dar ekranda özet sütunu alta iner ve tam genişliğe yayılır */
@media (max-width: 860px) {
  /* Alta inince dikey ayraç yatay ayraca dönüşür */
  .hero__facts {
    flex-basis: 100%;
    padding-left: 0;
    padding-top: var(--gap);
    box-shadow: inset 0 var(--px) 0 0 var(--border);
  }
}

@media (max-width: 620px) {
  /* Satır düzeni korunuyor ama ikon küçülüyor: dikey dizilimde ikon tek
     başına 100 px yer kaplayıp IP'yi ekranın çok aşağısına itiyordu. */
  .hero { align-items: flex-start; gap: var(--gap) 14px; }
  .hero__icon .ti { --ti-size: 50px; }
  .hero__body { flex: 1 1 200px; }
  .hero__facts { align-self: stretch; }
}

/* --------------------------------------------------------------------------
   Terminal
   -------------------------------------------------------------------------- */

.term {
  margin: 0 0 var(--gap-sec) 2px;
  background: var(--bg-panel);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

/* Terminalin kendi başlık çubuğu — gerçek bir pencere gibi dursun */
.term__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--px2) 12px;
  background: var(--bg-input);
  box-shadow: 0 var(--px) 0 0 var(--border);
}
.term__sprite { flex: 0 0 auto; line-height: 0; }
.term__sprite .ti { --ti-size: 25px; }
.term__barlabel {
  flex: 1 1 auto;
  font-size: 0.78rem;
  color: var(--fg-key);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term__bartag {
  flex: 0 0 auto;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--fg-dim);
}
.term__blink { animation: blink 1.05s steps(1) infinite; }

.term__out {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--pad-box) var(--pad-box) var(--px2);
  line-height: 1.3;
  max-height: 58vh;
  overflow-y: auto;
}

.term__out::-webkit-scrollbar { height: 10px; width: 10px; }
.term__out::-webkit-scrollbar-track { background: var(--bg-input); }
.term__out::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }

/* white-space konteynerde değil satırda: aksi halde kaynak koddaki satır
   sonları blok satırlar arasında fazladan boşluk üretiyor. */
.ln { display: block; min-height: 1.45em; white-space: pre; }

/* Terminaldeki düz cümleler (hizalı tablo/çıktı değil) dar ekranda
   kaymak yerine sarsın; aksi halde ilk satır cümlenin ortasından
   kesiliyor ve bozuk görünüyor. */
.ln--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Segment renkleri — Render.php'deki sınıflarla birebir eşleşir */
.seg.dim    { color: var(--fg-dim); }
.seg.key    { color: var(--fg-key); }
.seg.val    { color: var(--fg); }
.seg.ok     { color: var(--ok); }
.seg.warn   { color: var(--warn); }
.seg.err    { color: var(--err); }
.seg.head   { color: var(--head); font-weight: 700; }
.seg.accent { color: var(--accent); }

a.cmd { text-decoration: none; border-bottom: var(--px) dotted currentColor; cursor: pointer; }
a.cmd:hover { background: var(--select); }

/* Komut satırı */
.term__line {
  display: flex;
  align-items: baseline;
  padding: var(--px2) var(--pad-box) var(--px3);
  position: relative;
}

.term__prompt { color: var(--ok); white-space: pre; flex: 0 0 auto; user-select: none; }

.term__input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font: inherit;
  text-shadow: inherit;
  padding: 0;
  caret-color: transparent;
  min-width: 2ch;
}

/* Yanıp sönen blok imleç */
.term__cursor {
  position: absolute;
  top: 0;                 /* gerçek değer JS'te: giriş kutusuna ortalanır */
  width: 0.6em;
  height: 1.15em;
  background: var(--fg);
  pointer-events: none;
  animation: blink 1.05s steps(1) infinite;
}

/* Genel input:focus-visible kuralı (0,1,1) .term__input'un outline:0'ını
   (0,1,0) eziyor ve girişin etrafına çerçeve çiziyordu; terminalde odak
   göstergesi blok imlecin kendisi + satır altındaki ince çizgi. */
.term__input:focus-visible { outline: 0; }
/* Odak göstergesi imlecin kendisi: odaksızken içi boş ve sabit, odaktayken
   dolu ve yanıp sönen blok. Satır altına çizilen 2 px çizgi, ekranda
   "tuhaf bir çizgi" gibi algılandığı için kaldırıldı. */
.term__cursor {
  background: transparent;
  box-shadow: inset 0 0 0 var(--px) var(--fg);
  animation: none;
  opacity: 0.7;
}
.term__line:focus-within .term__cursor {
  background: var(--fg);
  box-shadow: none;
  animation: blink 1.05s steps(1) infinite;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .term__line:focus-within .term__cursor { animation: none; }
}
.term__line.is-busy .term__cursor { display: none; }

@keyframes blink { 0%, 49% { opacity: 0.9; } 50%, 100% { opacity: 0; } }

.term__hint { color: var(--fg-dim); font-size: 0.78em; padding: 0 var(--pad-box) 10px; margin: 0; }
.term__hint kbd {
  padding: 0 var(--px2);
  font: inherit;
  color: var(--fg-key);
  background: var(--bg-panel);
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-hi),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--edge-lo);
}

.term__suggest { color: var(--fg-dim); font-size: 0.88em; padding: 0 var(--pad-box) var(--px2); min-height: 1.1em; }
.term__suggest b { color: var(--accent); font-weight: 400; }

/* --------------------------------------------------------------------------
   Sayfa içerikleri
   -------------------------------------------------------------------------- */

/* Yalnızca dikey dolgu: eskiden "padding: 14px 0 34px" .wrap'in yan
   boşluğunu sıfırlıyordu; telefonda yazı ekranın kenarına yapışıktı. */
.page { padding-top: 14px; padding-bottom: 34px; flex: 1 1 auto; }

.crumb { color: var(--fg-dim); font-size: 0.9em; padding-bottom: var(--px3); }
.crumb a { color: var(--fg-key); }

h1 {
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
  color: var(--head);
  margin: 0 0 10px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 10px;
}
h1 .ti { flex: 0 0 auto; }

h2 {
  font-size: 1.32rem;
  color: var(--head);
  margin: calc(var(--gap-sec) * 1.6) 0 var(--gap);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
h2::before { content: "▚ "; color: var(--accent); font-weight: 400; }
/* Sayfanın ilk başlığı tepeye fazladan boşluk bırakmasın */
h2:first-child { margin-top: 0; }

/* h3 çoğunlukla SSS sorusu — tam cümle. Piksel font kısa etiketler için;
   cümlelerde okunurluğu düşürdüğü için burada monospace kalıyor. */
h3 {
  font-family: var(--font-sans);
  font-size: 1.08rem;
  color: var(--head);
  margin: var(--gap-sec) 0 var(--px3);
  font-weight: 700;
  line-height: 1.35;
}
h3::before { content: "▪ "; color: var(--ok); }

p { margin: 0 0 12px; max-width: 70ch; color: var(--fg); }
.lede {
  font-family: var(--font-sans);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--head);
  text-shadow: none;
  margin-bottom: var(--gap-sec);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Açıklama paneli (.prose)

   Paragraflar 78ch'de bitiyor, altındaki <pre> ise tam genişlikti; ikisi
   yan yana gelince metin "yarım kalmış" gibi duruyordu. Metni de kutuya
   alıp genişliği serbest bırakınca sayfadaki bütün bloklar aynı kenarda
   hizalanıyor.
   -------------------------------------------------------------------------- */

.prose {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--head);
  /* CRT ışıması harf kenarlarını bulanıklaştırıyor; okuma metninde kapalı */
  text-shadow: none;
  background: var(--bg-panel);
  padding: 16px 20px;
  margin: 0 0 var(--gap-sec) 2px;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

/* Kutunun içinde satır uzunluğu kutuyla sınırlı; sütun genişliğini .doc belirliyor */
.prose p,
.prose ul,
.prose .lede { max-width: none; color: inherit; }
.prose code, .prose kbd, .prose .out, .prose pre { font-family: var(--font-mono); font-size: 0.92em; }
.prose b, .prose strong { color: var(--accent); font-weight: 600; }

/* Panel içindeki ilk/son başlığın fazladan boşluk yapmaması */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* İç içe kutu görünmesin: panelin içindeki kod bloğu kenarlıksız */
.prose .out {
  margin-left: 0;
  background: var(--bg-input);
}

ul { margin: 0 0 16px; padding-left: 0; list-style: none; max-width: 80ch; }
ul li { padding-left: 1.6em; position: relative; margin-bottom: 6px; }
ul li::before { content: "▪"; position: absolute; left: 0.5em; color: var(--ok); }

code {
  background: var(--bg-input);
  padding: 0 var(--px2);
  color: var(--accent);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

/* Form */
.form {
  background: var(--bg-panel);
  padding: 16px;
  margin: 0 0 20px 2px;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

.form__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form__field { display: flex; flex-direction: column; gap: var(--px2); flex: 1 1 220px; min-width: 0; }
.form__field--narrow { flex: 0 1 140px; }
.form__field label {
  color: var(--fg-key);
  font-size: 0.9em;
  text-transform: uppercase;
}

.form__field input,
.form__field select,
.form__field textarea {
  background: var(--bg-input);
  border: 0;
  color: var(--fg);
  font: inherit;
  padding: 8px 10px;
  min-width: 0;
  width: 100%;
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-lo),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--edge-hi),
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--fg-dim); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-lo),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--edge-hi),
    0 calc(-1 * var(--px)) 0 0 var(--accent),
    0 var(--px) 0 0 var(--accent),
    calc(-1 * var(--px)) 0 0 0 var(--accent),
    var(--px) 0 0 0 var(--accent);
}

/* Piksel buton: kabartmalı, basınca içeri çöker */
.btn {
  background: var(--bg-input);
  border: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-hi),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--edge-lo),
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.btn:hover { background: var(--select); }
.btn:active {
  transform: translate(var(--px), var(--px));
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-lo),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--edge-hi),
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

/* Çıktı kutusu */
.out {
  background: var(--bg-panel);
  padding: 14px;
  margin: 0 0 20px 2px;
  overflow-x: auto;
  line-height: 1.45;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.out::-webkit-scrollbar { height: 10px; }
.out::-webkit-scrollbar-track { background: var(--bg-input); }
.out::-webkit-scrollbar-thumb { background: var(--border); }

.out__meta { color: var(--fg-dim); font-size: 0.9em; padding: 0 0 18px 2px; }

/* Rapor eylem düğmeleri */
.actions { display: flex; flex-wrap: wrap; gap: var(--px3); margin: 0 0 var(--gap) 2px; }
.actions .btn { font-size: 0.82em; padding: 8px 14px; }

.alert {
  background: var(--bg-panel);
  padding: 12px 14px;
  margin: 0 0 20px 2px;
  color: var(--err);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--err),
    0 var(--px) 0 0 var(--err),
    calc(-1 * var(--px)) 0 0 0 var(--err),
    var(--px) 0 0 0 var(--err);
}
.alert b { color: var(--err); display: block; }
.alert span { display: block; color: var(--fg-dim); margin-top: var(--px2); }

.note-box {
  background: var(--bg-panel);
  padding: 12px 14px;
  margin: 0 0 20px 2px;
  color: var(--fg-key);
  font-size: 0.92em;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

/* --------------------------------------------------------------------------
   Araç ikonları (cli-ikon ailesi)

   200x200 piksel terminal pencereleri. Sadece tam sayı bölenlerde
   küçültülüyor (200/4=50, 200/5=40, 200/2=100); ara ölçeklerde
   "pixelated" bile olsa kenarlar bulanıklaşıyor.

   Her ikonun normal / hover / basılı hâli var; durum değişimi kartın
   üzerine gelince CSS ile yapılıyor, JavaScript gerekmiyor.
   -------------------------------------------------------------------------- */

.ti {
  --ti-size: 50px;      /* animasyon kare genişliği bu değerden hesaplanır */
  display: block;
  flex: 0 0 auto;
  width: var(--ti-size);
  height: var(--ti-size);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  image-rendering: pixelated;
}

/* Klavyeyle gezenler de durum değişimini görsün */
.tile:focus-visible .ti,
.hero__icon:focus-visible .ti { filter: brightness(1.25); }

.ti--sm { --ti-size: 40px; }
.ti--lg { --ti-size: 100px; }
/* Hero ikonu: 200 px blok tek başına ekranın yarısını yiyordu.
   100 px hem tam sayı ölçek (200/2) hem de IP metnini gölgelemiyor. */
.ti--xl { --ti-size: 100px; }

/* --------------------------------------------------------------------------
   İkon durumları ve hover animasyonu

   Her ikon üç hâlini özel özellik olarak tanımlar (--hover, --press,
   --sheet); durum değişimini aşağıdaki üç genel kural yapar. Böylece
   ikon başına üç ayrı seçici yazmak yerine tek tanım yetiyor ve
   hareket-azaltma tercihi tek yerde ele alınıyor.

   Neden GIF değil de sprite sheet:
   - GIF yüklendiği anda oynamaya başlar ve durdurulamaz. Ekranda aynı
     anda 20 karo var; hepsi sürekli oynasa hem görsel kaos hem boşuna
     CPU/pil tüketimi olurdu. Sheet'te yalnızca üzerine gelinen oynar.
   - GIF, prefers-reduced-motion'ı tamamen yok sayar; CSS animasyonu tek
     kuralla kapatılıp durağan hover görseline dönebiliyor.
   - GIF 1-bit saydamlık taşır, PNG 8-bit alfa ile kenarlar temiz kalır.
   - Kare süresi CSS'te: hızı değiştirmek yeniden dışa aktarım istemez.

   Boyut farkı önemsiz (sheet 171 KB, GIF 122 KB) ve sheet'ler yalnızca
   üzerine gelindiğinde indiriliyor.
   -------------------------------------------------------------------------- */

/* Üzerine gelince 8 kare oynar. Kare genişliği --ti-size'dan gelir,
   böylece 25/40/50/100 px ölçülerin hepsinde aynı kural çalışır. */
.tile:hover .ti,
.hero__icon:hover .ti {
  background-image: var(--sheet, var(--hover, var(--rest)));
  background-size: calc(8 * var(--ti-size)) var(--ti-size);
  animation: ti-play 0.64s steps(8) infinite;
}

@keyframes ti-play {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-8 * var(--ti-size)); }
}

/* Basılı hâl tek karedir: animasyon durur */
.tile:active .ti,
.hero__icon:active .ti {
  background-image: var(--press, var(--rest));
  background-size: 100% 100%;
  background-position-x: 0;
  animation: none;
}

.ti-blacklist {
  --rest: url(/assets/icons/blacklist-buton.png);
  --hover: url(/assets/icons/blacklist-buton-hover.png);
  --press: url(/assets/icons/blacklist-buton-basili.png);
  --sheet: url(/assets/icons/anim/blacklist-hover-sheet.png);
  background-image: var(--rest);
}

.ti-client {
  --rest: url(/assets/icons/client-buton.png);
  --hover: url(/assets/icons/client-buton-hover.png);
  --press: url(/assets/icons/client-buton-basili.png);
  --sheet: url(/assets/icons/anim/client-hover-sheet.png);
  background-image: var(--rest);
}

.ti-convert {
  --rest: url(/assets/icons/convert-buton.png);
  --hover: url(/assets/icons/convert-buton-hover.png);
  --press: url(/assets/icons/convert-buton-basili.png);
  --sheet: url(/assets/icons/anim/convert-hover-sheet.png);
  background-image: var(--rest);
}

.ti-dns {
  --rest: url(/assets/icons/dns-buton.png);
  --hover: url(/assets/icons/dns-buton-hover.png);
  --press: url(/assets/icons/dns-buton-basili.png);
  --sheet: url(/assets/icons/anim/dns-hover-sheet.png);
  background-image: var(--rest);
}

.ti-headers {
  --rest: url(/assets/icons/headers-buton.png);
  --hover: url(/assets/icons/headers-buton-hover.png);
  --press: url(/assets/icons/headers-buton-basili.png);
  --sheet: url(/assets/icons/anim/headers-hover-sheet.png);
  background-image: var(--rest);
}

.ti-ipinfo {
  --rest: url(/assets/icons/ipinfo-buton.png);
  --hover: url(/assets/icons/ipinfo-buton-hover.png);
  --press: url(/assets/icons/ipinfo-buton-basili.png);
  --sheet: url(/assets/icons/anim/ipinfo-hover-sheet.png);
  background-image: var(--rest);
}

.ti-latency {
  --rest: url(/assets/icons/latency-buton.png);
  --hover: url(/assets/icons/latency-buton-hover.png);
  --press: url(/assets/icons/latency-buton-basili.png);
  --sheet: url(/assets/icons/anim/latency-hover-sheet.png);
  background-image: var(--rest);
}

.ti-lookup {
  --rest: url(/assets/icons/lookup-buton.png);
  --hover: url(/assets/icons/lookup-buton-hover.png);
  --press: url(/assets/icons/lookup-buton-basili.png);
  --sheet: url(/assets/icons/anim/lookup-hover-sheet.png);
  background-image: var(--rest);
}

.ti-mac {
  --rest: url(/assets/icons/mac-buton.png);
  --hover: url(/assets/icons/mac-buton-hover.png);
  --press: url(/assets/icons/mac-buton-basili.png);
  --sheet: url(/assets/icons/anim/mac-hover-sheet.png);
  background-image: var(--rest);
}

.ti-mail {
  --rest: url(/assets/icons/mail-buton.png);
  --hover: url(/assets/icons/mail-buton-hover.png);
  --press: url(/assets/icons/mail-buton-basili.png);
  --sheet: url(/assets/icons/anim/mail-hover-sheet.png);
  background-image: var(--rest);
}

.ti-myip {
  --rest: url(/assets/icons/myip-buton.png);
  --hover: url(/assets/icons/myip-buton-hover.png);
  --press: url(/assets/icons/myip-buton-basili.png);
  --sheet: url(/assets/icons/anim/myip-hover-sheet.png);
  background-image: var(--rest);
}

.ti-ping {
  --rest: url(/assets/icons/ping-buton.png);
  --hover: url(/assets/icons/ping-buton-hover.png);
  --press: url(/assets/icons/ping-buton-basili.png);
  --sheet: url(/assets/icons/anim/ping-hover-sheet.png);
  background-image: var(--rest);
}

.ti-port {
  --rest: url(/assets/icons/port-buton.png);
  --hover: url(/assets/icons/port-buton-hover.png);
  --press: url(/assets/icons/port-buton-basili.png);
  --sheet: url(/assets/icons/anim/port-hover-sheet.png);
  background-image: var(--rest);
}

.ti-propagation {
  --rest: url(/assets/icons/propagation-buton.png);
  --hover: url(/assets/icons/propagation-buton-hover.png);
  --press: url(/assets/icons/propagation-buton-basili.png);
  --sheet: url(/assets/icons/anim/propagation-hover-sheet.png);
  background-image: var(--rest);
}

.ti-rdns {
  --rest: url(/assets/icons/rdns-buton.png);
  --hover: url(/assets/icons/rdns-buton-hover.png);
  --press: url(/assets/icons/rdns-buton-basili.png);
  --sheet: url(/assets/icons/anim/rdns-hover-sheet.png);
  background-image: var(--rest);
}

.ti-registry {
  --rest: url(/assets/icons/registry-buton.png);
  --hover: url(/assets/icons/registry-buton-hover.png);
  --press: url(/assets/icons/registry-buton-basili.png);
  --sheet: url(/assets/icons/anim/registry-hover-sheet.png);
  background-image: var(--rest);
}

.ti-ssl {
  --rest: url(/assets/icons/ssl-buton.png);
  --hover: url(/assets/icons/ssl-buton-hover.png);
  --press: url(/assets/icons/ssl-buton-basili.png);
  --sheet: url(/assets/icons/anim/ssl-hover-sheet.png);
  background-image: var(--rest);
}

.ti-subnet {
  --rest: url(/assets/icons/subnet-buton.png);
  --hover: url(/assets/icons/subnet-buton-hover.png);
  --press: url(/assets/icons/subnet-buton-basili.png);
  --sheet: url(/assets/icons/anim/subnet-hover-sheet.png);
  background-image: var(--rest);
}

.ti-trace {
  --rest: url(/assets/icons/trace-buton.png);
  --hover: url(/assets/icons/trace-buton-hover.png);
  --press: url(/assets/icons/trace-buton-basili.png);
  --sheet: url(/assets/icons/anim/trace-hover-sheet.png);
  background-image: var(--rest);
}

.ti-webrtc {
  --rest: url(/assets/icons/webrtc-buton.png);
  --hover: url(/assets/icons/webrtc-buton-hover.png);
  --press: url(/assets/icons/webrtc-buton-basili.png);
  --sheet: url(/assets/icons/anim/webrtc-hover-sheet.png);
  background-image: var(--rest);
}

.ti-whois {
  --rest: url(/assets/icons/whois-buton.png);
  --hover: url(/assets/icons/whois-buton-hover.png);
  --press: url(/assets/icons/whois-buton-basili.png);
  --sheet: url(/assets/icons/anim/whois-hover-sheet.png);
  background-image: var(--rest);
}

.ti-site {
  /* Marka ikonu: siteicon/ paketiyle aynı çizim (2026-09-05). Buton değil:
     durum sürümü ve animasyonu yok, üç durum da aynı görsel. */
  --rest:  url(/assets/icons/brand/android-icon-192x192.png);
  --hover: url(/assets/icons/brand/android-icon-192x192.png);
  --press: url(/assets/icons/brand/android-icon-192x192.png);
  background-image: var(--rest);
}

@media (max-width: 900px) {
  .ti--xl { --ti-size: 100px; }
}

@media (max-width: 640px) {
  .ti { --ti-size: 40px; }
  .ti--lg { --ti-size: 100px; }
}

@media (max-width: 480px) {
  .ti--lg { --ti-size: 50px; }
  .ti--xl { --ti-size: 100px; }
}

/* --------------------------------------------------------------------------
   Araç butonları (.tile)

   İkonlar zaten birer buton olarak çizildi — terminal penceresi gövdesi,
   başlık çubuğu, "> ARACADI" istemi. Onları küçük bir liste ikonu gibi
   kullanmak yerine asıl tıklama hedefi yapıyoruz: ikon büyük, altında
   yalnızca ad ve komut. Hover/basılı hâlleri ikonun kendi durumlarından
   geliyor, karo da bir piksel kalkıp çöküyor.
   -------------------------------------------------------------------------- */

.tools {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--px3);
  margin: 0 0 var(--gap-sec) 2px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--px);
  padding: var(--gap) var(--px3) var(--px3);
  color: var(--fg);
  background: var(--bg-panel);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}

.tile:hover {
  text-decoration: none;
  background: var(--bg-input);
  transform: translate(calc(-1 * var(--px)), calc(-1 * var(--px)));
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--accent),
    0 var(--px) 0 0 var(--accent),
    calc(-1 * var(--px)) 0 0 0 var(--accent),
    var(--px) 0 0 0 var(--accent),
    var(--px2) var(--px2) 0 0 var(--edge-lo);
}

/* Basınca gerçekten çöksün — ikonun "basili" hâliyle birlikte */
.tile:active {
  transform: translate(var(--px), var(--px));
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--accent),
    0 var(--px) 0 0 var(--accent),
    calc(-1 * var(--px)) 0 0 0 var(--accent),
    var(--px) 0 0 0 var(--accent);
}

.tile__title {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--head);
  font-size: 0.86rem;
  line-height: 1.22;
  margin-top: var(--px3);
  /* İki satırlık yer her zaman ayrılıyor: tek ve çift satırlı adlar
     yan yana geldiğinde ızgara tırtıklı görünmesin. */
  min-height: 2.44em;
  display: flex;
  align-items: center;
}
/* Başlık iki satıra taşarsa komut satırı yine de karonun altına otursun */
.tile__cmd {
  color: var(--fg-dim);
  font-size: 0.8rem;
  margin-top: auto;
  padding-top: var(--px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tile__cmd::before { content: "$ "; }

@media (max-width: 820px) { .tools { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .tools { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .tools { grid-template-columns: repeat(2, 1fr); } }

/* Grup etiketi — araçları kategoriye ayırır ama bir başlık kadar yer kaplamaz.
   Etiketten sonra kalan alanı ince bir çizgi doldurur. */
.grouplab {
  display: flex;
  align-items: center;
  gap: var(--px3);
  margin: 0 0 var(--px3) 2px;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--fg-key);
}
.grouplab::after {
  content: "";
  flex: 1 1 auto;
  height: var(--px);
  background-image: repeating-linear-gradient(
    to right,
    var(--border) 0 var(--px2),
    transparent var(--px2) calc(var(--px2) * 2)
  );
}
.grouplab + .tools { margin-bottom: var(--gap); }

/* Örnek sorgular */
.examples { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px 2px; }
.examples a {
  background: var(--bg-panel);
  padding: var(--px2) 10px;
  color: var(--fg-key);
  font-size: 0.9em;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.examples a:hover {
  color: var(--accent);
  text-decoration: none;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--accent),
    0 var(--px) 0 0 var(--accent),
    calc(-1 * var(--px)) 0 0 0 var(--accent),
    var(--px) 0 0 0 var(--accent);
}

/* İstemci testi alanı */
.probe {
  background: var(--bg-panel);
  padding: 16px;
  margin: 0 0 20px 2px;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.probe__stage {
  color: var(--fg-key);
  margin-bottom: 12px;
  text-transform: uppercase;
  font-size: 0.92em;
}
.probe__big { font-size: 2.4em; color: var(--accent); line-height: 1.1; }
.probe__unit { font-size: 0.4em; color: var(--fg-dim); }
.probe__out { overflow-x: auto; line-height: 1.32; }

/* Segmentli piksel ölçer — düz dolgu yerine bloklar */
.meter {
  height: 12px;
  background: var(--bg-input);
  margin: 10px 0 var(--px2);
  padding: var(--px);
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--edge-lo),
    0 calc(-1 * var(--px)) 0 0 var(--border),
    0 var(--px) 0 0 var(--border),
    calc(-1 * var(--px)) 0 0 0 var(--border),
    var(--px) 0 0 0 var(--border);
}
.meter__fill {
  height: 100%;
  width: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--ok) 0 var(--px3),
    transparent var(--px3) calc(var(--px3) + var(--px))
  );
  transition: width 0.15s steps(8);
}

/* Anahtar/değer tablosu */
.kvtable { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.94em; }
.kvtable th, .kvtable td {
  text-align: left;
  padding: 6px 9px;
  border-bottom: var(--px) solid var(--border);
  vertical-align: top;
}
.kvtable th { color: var(--fg-key); font-weight: 400; width: 34%; }
.kvtable td { color: var(--fg); word-break: break-word; }
.kvtable tr:hover td, .kvtable tr:hover th { background: var(--bg-panel); }

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */

.footer {
  padding: 22px 0 30px;
  color: var(--fg-dim);
  font-size: 0.88em;
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--border);
}
.footer__cols { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 16px; }
.footer__col { min-width: 155px; }
.footer__col b {
  color: var(--fg-key); font-weight: 700; display: block; margin-bottom: 8px;
  text-transform: uppercase; font-size: 0.92em;
}
.footer__col a { display: block; color: var(--fg-dim); padding: var(--px) 0; }
.footer__col a:hover { color: var(--accent); }
.footer__fine { margin-top: var(--px3); }

/* --------------------------------------------------------------------------
   Erişilebilirlik
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-panel);
  color: var(--accent);
  padding: 9px 15px;
  z-index: 10000;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--accent),
    0 var(--px) 0 0 var(--accent),
    calc(-1 * var(--px)) 0 0 0 var(--accent),
    var(--px) 0 0 0 var(--accent);
}
.skip:focus { left: 10px; top: 10px; }

/* Dokunmatik cihazlarda tıklama hedefleri parmakla kullanılabilir olmalı.
   pointer: coarse yalnızca dokunmatik/kalem girişinde eşleşir, fare ile
   gezen masaüstü kullanıcısında bu kurallar devreye girmez. */
@media (pointer: coarse) {
  /* iOS Safari, yazı tipi 16 px'in altındaki bir alana odaklanınca sayfayı
     otomatik yakınlaştırıyor ve kullanıcı elle geri uzaklaştırmak zorunda
     kalıyor. 16 px bunu tamamen engelliyor. */
  .form__field input,
  .form__field select,
  .form__field textarea,
  .term__input {
    font-size: 16px;
    min-height: 44px;
  }

  .hero__copy { min-height: 44px; padding: 10px 16px; }

  

  

  .topbar__nav a { padding: 10px var(--px2); }

  /* a.cmd'ye dolgu VERİLMİYOR: terminal satırları sabit yükseklikte bir
     ızgara oluşturuyor, dolgu eklemek alt çizgiyi bir sonraki satırın
     metnine bindiriyor. */
}

@media (prefers-reduced-motion: reduce) {
  .term__cursor { animation: none; }
  /* Animasyon yerine durağan hover görseline dönülür — sheet'i
     hareketsiz göstermek 8 kareyi birden sıkıştırırdı. */
  .tile:hover .ti,
  .hero__icon:hover .ti {
    background-image: var(--hover, var(--rest));
    background-size: 100% 100%;
    background-position-x: 0;
    animation: none;
  }
  .tile:hover, .tile:active, .btn:active, .hero__copy:active { transform: none; }
  * { transition: none !important; }
}

@media (max-width: 640px) {
  :root { --px: 2px; }
  /* Pencere noktaları salt dekoratif (aria-hidden); dar üst çubukta
     yer açmak için ilk onlar gidiyor. */
  .topbar__dots { display: none; }
  /* Mobilde sayfa adı gizlenir, marka kalır; üç bağlantı da görünür */
  .topbar__page { display: none; }
  .topbar__title { font-size: 0.85em; }
  .topbar__nav { gap: 10px; }
  .form__row { flex-direction: column; align-items: stretch; }
  /* flex-basis sütun yönünde YÜKSEKLİĞE uygulanır: satır düzeni için
     yazılan "flex: 1 1 220px" mobilde alanları 220 px boyunda yapıp
     formun ortasında koca bir boşluk bırakıyordu. */
  .form__field,
  .form__field--narrow { flex: 0 0 auto; }
  /* Form gönder düğmeleri tam genişlik olsun; durum çubuğundaki
     CRT anahtarı küçük kalmalı, yoksa alt bara yayılıyor. */
  .form .btn, .probe .btn { width: 100%; }
}

/* ---- Yazdırma / PDF -------------------------------------------------
   Rapor çıktısı kâğıda gidebilmeli. Ölçüm: en geniş rapor satırı 113
   karakter, Consolas'ın ilerleme genişliği 0.55em. 12mm kenarlıkla A4'te
   7.33 inç kalıyor; 8.5pt tam 7.33 inç tutup sınırda kaldığı için 8pt'ye
   iniyoruz (6.90 inç, %6 pay). Tablolar box-drawing karakterleriyle
   hizalandığından satırlar normalde sarılmıyor; yine de 118 karakteri
   aşan bir çıktıya karşı emniyet olarak pre-wrap bırakıldı — nadir bir
   satırda hizanın bozulması, içeriğin sayfa kenarında kaybolmasından
   iyidir.
------------------------------------------------------------------- */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  /* Ekrana ait olan her şey: gezinme, form, tema, açıklama metinleri */
  .topbar, .term__line, .footer, .actions, .examples, .form, .crumb, .tools, .doc, .probe__actions, .out__meta, noscript { display: none !important; }

  html, body { background: #fff; color: #000; text-shadow: none; }
  body { font-size: 10pt; }
  .seg, .ln, a { color: #000 !important; }
  a[href] { text-decoration: none; }

  .wrap { max-width: none; padding: 0; margin: 0; }
  h1 { font-size: 15pt; margin: 0 0 4pt; }
  h1 .ti { display: none; }            /* ikon arka plan görseli, basılmaz */
  .lede { font-size: 9pt; margin: 0 0 8pt; }

  /* overflow-x: auto ekranda kaydırma çubuğu verir, kâğıtta içeriği
     keser — yazdırmada taşma görünür olmalı. */
  .out {
    overflow: visible;
    font-size: 8pt;
    line-height: 1.25;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: 0;
  }
  .ln {
    break-inside: avoid;
    page-break-inside: avoid;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .tile, .hero, .alert { box-shadow: none; border: 1px solid #999; }
}

/* ==========================================================================
   Okunurluk ve yerleşim düzeltmeleri (tasarım geçişi)

   Ölçülen sorunlar: mobilde 13 px gövde metni; 1120 px genişlikte
   ~120 karakterlik mono paragraf satırları; açıklama/SSS metninin
   çıktıyla aynı yeşil mono tonda olması; araç sayfasında dar tabloların
   sağında boş kalan alan. Çözüm: okuma metni sans-serif ve 70ch'de,
   açıklama + SSS sol sütunda, ilgili araçlar sağda yapışkan bir rayda.
   ========================================================================== */

.page__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
.doc { min-width: 0; max-width: 78ch; }

.rail { position: sticky; top: 54px; }
.rail h2 { font-size: 1.05rem; margin-top: 0; }
.rail .tools { grid-template-columns: 1fr; gap: var(--px2); margin-left: 0; }
.rail .tile {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 8px 12px;
}
.rail .tile .ti { --ti-size: 44px; flex: 0 0 auto; }
.rail .tile__title { min-height: 0; margin: 0; font-size: 0.9rem; flex: 1 1 auto; }
.rail .tile__cmd { margin: 0; padding: 0; flex: 0 0 auto; }

@media (max-width: 1023px) {
  .page__cols { grid-template-columns: 1fr; gap: 0; }
  .doc { max-width: none; }
  .rail { position: static; }
  .rail .tools { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Okuma metni olan her yerde sans ve ışımasız */
.hero__facts, .footer, .note-box, .alert, .form__field label, .term__hint {
  font-family: var(--font-sans);
  text-shadow: none;
}
.hero__facts dd { font-family: var(--font-mono); }   /* değerler veri: mono */
.footer { font-size: 0.92rem; line-height: 1.55; }
.hero__label { font-size: 0.82rem; letter-spacing: 0.08em; }
.btn { font-size: max(0.85rem, 13px); }

/* Mobil: gövde 15 px; terminal satırları taşmak yerine sarılabilir olanlar sarılır */
@media (max-width: 640px) {
  .out { padding: 12px 10px; }
  .tile__title { font-size: 0.86rem; }
  .prose { padding: 14px 14px; }
  .term__hint { font-size: 0.8rem; }
}

.topbar__title { min-width: 0; }
.topbar__nav { flex: 0 0 auto; }
/* ==========================================================================
   Görsel bloklar: piksel dünya haritası ve sonuç grafikleri
   Satır içi SVG; hücre = 1 birim, renkler tema tokenlerinden.
   ========================================================================== */
.ln--figure { white-space: normal; line-height: 0; padding: var(--px3) 0; }
.map { display: block; width: 100%; max-width: 720px; height: auto; shape-rendering: crispEdges; }
.map--hero { max-width: 100%; }
.map__sea  { fill: var(--bg-input); }
.map__land { fill: var(--fg-dim); opacity: 0.55; }
.map__halo { fill: var(--bg-input); }
.map__dot  { fill: var(--accent); }
.map__dot--ok     { fill: var(--ok); }
.map__dot--warn   { fill: var(--warn); }
.map__dot--err    { fill: var(--err); }
.map__dot--dim    { fill: var(--fg-dim); }
.map__dot--accent { fill: var(--accent); animation: map-pulse 1.6s steps(1) infinite; }
.map__path { fill: none; stroke: var(--accent); stroke-width: 0.6; stroke-dasharray: 1.2 1; opacity: 0.85; }
.map__label { font-family: var(--font-mono); font-size: 3.2px; fill: var(--head); paint-order: stroke; stroke: var(--bg-input); stroke-width: 0.8; }
@keyframes map-pulse { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .map__dot--accent { animation: none; } }

/* Sonuç grafikleri (SSL zaman çizgisi, port ızgarası, RTT çubukları, sparkline) */
.fig { display: block; width: 100%; max-width: 720px; height: auto; shape-rendering: crispEdges; }
.fig__bg    { fill: var(--bg-input); }
.fig__ok    { fill: var(--ok); }
.fig__warn  { fill: var(--warn); }
.fig__err   { fill: var(--err); }
.fig__dim   { fill: var(--fg-dim); opacity: 0.5; }
.fig__acc   { fill: var(--accent); }
.fig__line  { fill: none; stroke: var(--accent); stroke-width: 1; }
.fig__text  { font-family: var(--font-mono); font-size: 3.2px; fill: var(--fg-key); }
.fig__text--head { fill: var(--head); }
/* ==========================================================================
   Görsel geçiş 2: hero haritası, geniş araç karoları, "nasıl çalışır"
   ========================================================================== */
/* Hero yan sütunu: harita + özet. Eski .hero__facts kenar çizgisi buraya taşındı.
   Genişlik: IP sütunu kendi içerik genişliğini korur, harita sütunu YALNIZCA
   kalan alanı alır (en az 280, en çok 460 px). Eskiden sabit 440 px tabanı
   vardı; ikon + IP (~500 px) + 440 px en geniş hero'ya bile sığmadığı için
   harita her ekranda alt satıra kayıyordu (gerçek IPv4'te; yerelde "::1"
   kısa olduğu için görünmüyordu). */
.hero__side {
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 460px;
  margin-left: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
  padding-left: 22px;
  box-shadow: inset var(--px) 0 0 0 var(--border);
}
.hero__side .hero__facts { flex: 0 0 auto; padding: 0; box-shadow: none; align-self: auto; }
@media (min-width: 1041px) {
  /* Geniş ekran: tek satır garanti; sığmazsa IP sütunu daralır
     (kopyala düğmesi IP'nin altına iner), harita satırdan düşmez. */
  .hero { flex-wrap: nowrap; }
  .hero__body { flex: 0 1 auto; }
}
/* Dar ekran: yan sütun tam genişlikte alta iner, dikey ayraç yataya döner.
   Tablet aralığında harita ile özet yan yana durur; harita ekranı
   kaplayacak kadar büyümez. */
@media (max-width: 1040px) {
  .hero__side {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    padding-top: var(--gap);
    box-shadow: inset 0 var(--px) 0 0 var(--border);
  }
}
@media (min-width: 621px) and (max-width: 1040px) {
  .hero__side { flex-direction: row; align-items: center; gap: 22px; }
  .hero__side .map--hero { flex: 0 1 440px; width: 440px; min-width: 0; }
  .hero__side .hero__facts { flex: 1 1 auto; }
}

/* /araclar: geniş karolar, tek satır açıklama */
.tools--wide { grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tile__desc { display: none; }
.tools--wide .tile { padding: 14px 12px 12px; }
.tools--wide .tile__title { min-height: 0; }
.tools--wide .tile__desc {
  display: block;
  font-family: var(--font-sans);
  text-transform: none;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--fg-key);
  text-shadow: none;
  margin: var(--px2) 0 var(--px2);
}
@media (max-width: 760px) { .tools--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tools--wide { grid-template-columns: 1fr; } }

/* Hakkında: nasıl çalışır diyagramı */
.how { display: block; width: 100%; max-width: 720px; height: auto; margin: var(--gap) 0 var(--gap-sec); shape-rendering: crispEdges; }
.how__box   { fill: var(--bg-input); stroke: var(--border); stroke-width: 1; }
.how__text  { font-family: var(--font-mono); font-size: 4.2px; font-weight: 700; fill: var(--head); }
.how__sub   { font-family: var(--font-sans); font-size: 3.1px; fill: var(--fg-key); }
.how__arrow { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 1.5; }
.how__note  { font-family: var(--font-sans); font-size: 3.2px; fill: var(--ok); }
.fig__text--onfill { fill: var(--bg-input); }

/* Dar ekranda SVG yazıları: viewBox birimleri küçüldüğü için etiketler
   9 px'e düşüyordu (13 px kuralının altı). Harita etiketleri gizlenir —
   tablo zaten adları veriyor, noktaların rengi yeter; figür yazıları büyür. */
@media (max-width: 640px) {
  .map__label { display: none; }
  .fig__text { font-size: 4.2px; }
}

/* Figür küçük yazı (port servis adı, şerit etiketi) — satır içi style yerine sınıf */
.fig__text--xs { font-size: 2.6px; }
@media (max-width: 640px) { .fig__text--xs { font-size: 3.4px; } }

/* Traceroute: "Kendi rotanız" paneli (yapıştırılan tracert çıktısı) */
.paste { margin: var(--gap-sec) 0 0; }
.paste h2 { margin-top: 0; }
.paste__lede, .paste__note {
  font-family: var(--font-sans);
  text-shadow: none;
  color: var(--fg-key);
  line-height: 1.5;
  max-width: 72ch;
}
.paste__note { font-size: 0.86rem; color: var(--fg-dim); margin-top: 0; }
.paste__steps {
  font-family: var(--font-sans);
  text-shadow: none;
  line-height: 1.6;
  margin: 0 0 var(--gap);
  padding-left: 1.4em;
}
.paste__steps code { font-family: var(--font-mono); color: var(--accent); }
.paste .form { display: flex; flex-direction: column; gap: var(--gap); }
.paste .actions { margin: 0; }
.form__field textarea {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.45;
  min-height: 11em;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* ==========================================================================
   Hero IP: tek satır (2026-10-16)
   IPv4 asla bölünmez. Eskiden word-break: break-all vardı; dar telefonda
   ikonun yanında ~200 px kalınca "46.104.74.2 / 45" diye kırılıyordu.
   Yazı boyutu ekrana göre küçülür: mono yazıda karakter ~0,55 em,
   en uzun IPv4 (15 karakter) ~8,1 em; kullanılabilir genişlik telefonda
   100vw − 62 px (kenar boşlukları + kutu dolgusu). Android'in Droid Sans
   Mono'su 0,6 em geniş; bölen 9,2 ona göre. IPv6 uzun olduğu için
   daha küçük yazılır ve yalnızca iki nokta üst üste sonrasında kırılır.
   ========================================================================== */
.hero__ip { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.hero__ip--v6 {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(1.35rem, 0.9rem + 2.4vw, 2.5rem);
}

@media (max-width: 620px) {
  /* Telefon: ikon etiket satırına küçülerek çıkar, IP tüm genişliği alır.
     .hero__body "display: contents" ile çocuklarını hero ızgarasına verir. */
  .hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }
  .hero__body { display: contents; }
  .hero__icon { grid-column: 1; grid-row: 1; }
  .hero__icon .ti { --ti-size: 40px; }
  .hero__label, h1.hero__label { grid-column: 2; grid-row: 1; margin: 0; }
  .hero__ipwrap, .hero__meta, .hero__side { grid-column: 1 / -1; }
  .hero__meta { margin-top: 0; }
  .hero__ip:not(.hero__ip--v6) { font-size: min(clamp(1.6rem, 1.15rem + 4.4vw, 3.6rem), calc((100vw - 62px) / 9.2)); }
  .hero__ipwrap { row-gap: 10px; }
}

/* ==========================================================================
   Çıktı satırları: her ekrana uyum (2026-10-16)
   Satırlar 72 sütunluk terminal çıktısı. Eskiden hepsi white-space: pre idi:
   telefonda değerler kutunun dışına taşıyor ("TurkNet Ile…"), kutu yatay
   kayıyordu. Artık satır türüne göre davranılıyor (Render::lineClass):
   ========================================================================== */
/* Cümleler sarılır; devam satırı asılı girintiyle */
.out .ln, .term__out .ln {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: 4ch;
  text-indent: -4ch;
}
/* Tablo ve çubuk: hiza her şeyden önemli — sarılmaz, gerekirse kutu kayar */
.out .ln--pre, .term__out .ln--pre {
  white-space: pre;
  overflow-wrap: normal;
  padding-left: 0;
  text-indent: 0;
}
/* Başlık/çizgi dolgusu (▓▒░ ───): dekoratif, sığmayan kısmı kesilir */
.out .ln--bar, .term__out .ln--bar {
  white-space: pre;
  overflow: hidden;
  padding-left: 0;
  text-indent: 0;
}
.out .ln--figure, .term__out .ln--figure { padding-left: 0; text-indent: 0; }
/* Anahtar ···· değer: sığarsa aynı satır (hiza korunur), sığmazsa değer
   alt satıra 6 karakter girintili iner ve gerekirse kendi içinde sarılır */
.out .ln--kv, .term__out .ln--kv {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-left: 6ch;
  text-indent: 0;
}
.ln--kv > .seg:first-child { margin-left: -6ch; white-space: pre; }
.ln--kv > .lead { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: pre; }
.ln--kv > .lead ~ * { flex: 0 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Geniş ekran: çıktı gazete gibi iki sütuna akar; tablolu bölüm tam genişlik.
   Sütun en az 460 px (2 × 460 + 40 aralık, 1120 px kutunun içine sığıyor);
   daha dar kutuda kendiliğinden tek sütun. Bölümler bölünebilir ama satır,
   harita ve başlık-ilk satır ikilisi bölünmez — yoksa haritalı uzun bölüm
   yanındaki kısa bölümün altında koca boşluk bırakıyordu. */
.out__cols { columns: 3 460px; column-gap: 40px; column-rule: var(--px) solid var(--border); }
.out__cols .ln { break-inside: avoid; }
.out__cols .ln--bar { break-after: avoid; }
/* İki sütun yalnızca ~1040 px üstünde oluşuyor; orada yazı %8 küçülür ki
   tipik anahtar-değer satırı (59 karakter) 500 px sütuna tek satır sığsın. */
@media (min-width: 1040px) { .out__cols { font-size: 0.92em; } }
.out__cols > .sec--wide { column-span: all; }
.out__cols > .sec + .sec--wide, .out__cols > .sec--wide + .sec { margin-top: var(--px2); }

/* Telefon: çıktı ve terminal yazısı biraz küçülür (13 px kuralının üstünde),
   başlıklar ekranı taşmayacak boyda */
@media (max-width: 640px) {
  .out, .term__out { font-size: 0.84rem; }
  h2 { font-size: 1.1rem; letter-spacing: 0.01em; }
  h1 { font-size: clamp(1.25rem, 1rem + 1.6vw, 1.6rem); }
}

@media print {
  .out__cols { columns: auto; column-rule: none; }
  .out .ln, .out .ln--kv { display: block; padding-left: 0; text-indent: 0; }
  .ln--kv > .seg:first-child { margin-left: 0; }
}

/* ==========================================================================
   Yatay yerleşim (2026-10-16)
   Eskiden her şey 1120 px'lik tek sütunda alt alta diziliyordu; 2000 px
   ekranda sayfanın yarısı boş kenardı. Kapsayıcı 1680 px'e genişledi ve
   bloklar yan yana akıyor: ana sayfada IP kartı + terminal tek sırada,
   araç grupları sütun sütun; açıklama/SSS/hakkında blok ızgarasında.
   ========================================================================== */
.wrap { max-width: 1680px; padding: 0 clamp(14px, 2vw, 32px); }

/* Blok ızgarası: kartlar, araç açıklama bölümleri, hakkında bölümleri.
   Dar ekranda kendiliğinden tek sütun (min(…, 100%) taşmayı önler). */
.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--gap) 24px;
  align-items: start;
  margin: 0 0 var(--gap-sec);
}
.blocks > .prose, .blocks > .blk > .prose { margin: 0 0 0 2px; }
.blk { min-width: 0; }
/* SSS normal blok: tam genişlik yayılınca ilk sıranın 3. sütunu boş kalıyordu */
.blk--wide { grid-column: 1 / -1; }
.doc { max-width: none; }
/* SSS kutunun içinde iki sütun: soru-cevap ikilisi bölünmez */
.blk--faq .prose { columns: 2 380px; column-gap: 40px; column-rule: var(--px) solid var(--border); }
.blk--faq .prose h3 { break-after: avoid; }
.blk--faq .prose p { break-inside: avoid; }
.blk__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 24px; }

@media (min-width: 1280px) {
  /* Ana sayfa üst sıra: IP kartı | terminal */
  .home__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 28px;
    align-items: stretch;
    margin: 14px 0 var(--gap-sec);
  }
  .home__top > .hero, .home__top > .term { margin: 0 0 0 2px; }
  /* Yarım genişlikte kart: IP üstte, harita + özet altta yan yana */
  .home__top .hero { flex-wrap: wrap; align-content: center; }
  .home__top .hero__body { flex: 1 1 auto; }
  .home__top .hero__side {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    padding-top: var(--gap);
    box-shadow: inset 0 var(--px) 0 0 var(--border);
    flex-direction: row;
    align-items: center;
    gap: 22px;
  }
  .home__top .hero__side .map--hero { flex: 0 1 440px; width: 440px; min-width: 0; }
  .home__top .hero__side .hero__facts { flex: 1 1 auto; }
  /* Terminal kartın boyunu doldurur; çıktı alanı sabit yükseklikte kayar */
  .home__top .term { display: flex; flex-direction: column; }
  .home__top .term__out { flex: 1 1 auto; height: clamp(200px, 26vh, 380px); max-height: none; }

  /* Araç grupları yan yana sütunlar; grup içinde karo sayısı genişliğe göre
     (1680 px'de 5 grup × 2 karo, 1280 px'de 3 grup × 3 karo) */
  .groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--gap) 24px;
    align-items: start;
    margin-bottom: var(--gap-sec);
  }
  .groups .tools { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); margin-bottom: 0; }

  /* /araclar: geniş karolar ekran boyunca */
  .tools--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* 1600 px üstü: grup genişliği karo sütunu sayısıyla orantılı — 5 araçlı
   gruplar 3, diğerleri 2 karo genişliğinde; hepsi en çok 2 sıra (eskiden
   5 araçlı grupların 3. sırasında tek karo sallanıyordu). */
@media (min-width: 1600px) {
  .groups { display: flex; gap: var(--gap) 24px; align-items: flex-start; }
  .group { flex: 2 1 0; min-width: 0; }
  .group--n5, .group--n6 { flex-grow: 3; }
  .groups .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group--n5 .tools, .group--n6 .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1280–1599 px: 24 birimlik ızgara. 1. sıra IP (2 karo) + DNS (3) + Ağ (3),
   2. sıra Tarayıcı (3) + Hesaplayıcılar (3) — toplam 3 karo sırası.
   Sütun aralığı 0, gruplar arası boşluk kenar boşluğuyla: 24 izin 23
   aralığı olurdu. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .groups { grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 0; margin-left: -12px; margin-right: -12px; }
  .group { margin: 0 12px; min-width: 0; }
  .group--n4 { grid-column: span 6; }
  .group--n5, .group--n6 { grid-column: span 9; }
  /* span 9 = DNS/Ağ ile aynı karo boyu; kare karolar sıralar arasında eşit kalsın */
  .group--n3 { grid-column: span 9; }
  .group--n4 .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group--n5 .tools, .group--n6 .tools, .group--n3 .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Geniş ekranda tek alanlı form 1600 px boyunca uzamasın */
.page > .form { max-width: 1040px; }

/* Kısa kartlar (hakkında): 300 px'e kadar daralabilir — 2000 px ekranda beş
   kart tek sırada. Kart içi başlık küçük: büyük h2 300 px'te üç satıra bölünüyordu. */
.blocks--tight { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.blocks h2 { font-size: 1.08rem; }

/* ==========================================================================
   Kare araç karoları (ana sayfa, 2026-10-16)
   Karo içeriği karonun KENDİ genişliğine göre ölçeklenir (container query
   birimi cqi): ikon genişliğin yarısı (48–100 px), ad ≥ 13 px, en çok iki
   satır. 2000 px ekranda 12 karo tek sırada ~123 px kare; telefonda iki
   sütun ~175 px kare — her genişlikte kare kalır.
   ========================================================================== */
.home .tools > .tile {
  aspect-ratio: 1 / 1;
  min-height: 0;
  container-type: inline-size;
  justify-content: center;
  gap: 0;
  padding: 6px 4px;
  overflow: hidden;
}
.home .tools > .tile .ti { --ti-size: clamp(48px, 50cqi, 100px); }
.home .tools > .tile .tile__title {
  font-size: clamp(13px, 10.4cqi, 15px);
  letter-spacing: 0;
  line-height: 1.15;
  min-height: 2.3em;
  margin-top: clamp(3px, 4cqi, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .tools > .tile .tile__cmd { font-size: 13px; margin-top: clamp(2px, 3cqi, 6px); padding-top: 0; }

/* Rapor indirme formu düğme sırasının parçası gibi dursun */
.actions__form { display: contents; }