/* Panelin stilleri. index.html'den cikarildi cunku Platformlar
   sayfasi da ayni dili konusuyor; kopyalanan bir stil dosyasi ilk
   degisiklikte ayrisiyor. */
:root {
    --bg: #fbfaf8; --panel: #fff; --ink: #1c1b19; --muted: #6b6762;
    --line: #e5e1db; --accent: #2f6f4f; --accent-ink: #fff;
    --danger: #a33a2a; --warn: #8a6a1f; --chip: #f1eee9;
    --radius: 10px;
    /* TIPOGRAFI BIR SECIM, VARSAYILAN DEGIL.
       Web fontu YUKLENMIYOR ve bu bilincli: her ziyaretcinin tarayicisi
       her acilista uc parti bir adrese istek atardi, ve kendi barindirmak
       depoya font ikilileri sokardi. Ikisi de bir yazi tipi icin fazla
       bedel.
       Yerine KASITLI bir yigin: baslikta serif, govdede sans. Zit cift
       karakteri tasiyan sey -- tek bir ailenin agirlik farkindan daha
       cok ayrim veriyor ve bu paletle (sicak kirik beyaz, yesil vurgu)
       editoryal bir ton kuruyor.
       ui-serif once: isletim sisteminin kendi iyi serifini aliyor
       (Apple'da New York). Georgia yedegi Windows ve Mac'te neredeyse
       her zaman var, yani yigin gercekten serif dusuyor -- "serif"
       jenerigine dusen bir yigin tarayicinin cirkin varsayilanini
       veriyordu. */
    --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #171614; --panel: #1f1e1b; --ink: #ece9e4; --muted: #9d9892;
      --line: #322f2b; --accent: #6aa886; --accent-ink: #12211a;
      --danger: #d98a7a; --warn: #d0ad5e; --chip: #2a2825;
    }
  }
  * { box-sizing: border-box; }
  /* Secim rengi de temanin parcasi; varsayilan mavi iki temada da yabanci.
     color-mix ile vurgu renginin soluk hali. */
  ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  /* Tarayıcının kendi parçaları (takvim ikonu, kaydırma çubuğu, otomatik
     doldurma) temayı buradan öğreniyor; aksi hâlde koyu zeminde açık tema
     parçaları çıkıyor. */
  :root { color-scheme: dark light; }
  :root[data-theme="light"] { color-scheme: light; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }
  /* [hidden] her zaman kazansin: display veren bir sinif tarayicinin
     [hidden] kuralini sessizce geciyor ve gizlenmis bolum ekranda
     kaliyor. Giris karti panonun ustune bu yuzden binmisti. */
  [hidden] { display: none !important; }
  a { color: var(--accent); }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 15px/1.55 var(--font-body);
  }
  header {
    border-bottom: 1px solid var(--line); background: var(--panel);
    position: sticky; top: 0; z-index: 10;
  }
  .wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

  /* BASLIK VE GEZINME ICERIKLE AYNI GENISLIKTE.
     Dort panel sayfasinin dordu de artik .board kullaniyor (1320px) ama
     ustteki serit .wrap'te kaliyordu: 1440 piksellik bir ekranda urun
     adi ve dil dugmesi, altindaki icerikten 230 piksel iceride
     duruyordu. Tarayicida olculdu -- serit 860, icerik 1320. */
  header .wrap, .wrap.nav { max-width: 1320px; }

  /* Pano. Her şey bir kutuda ve üst üste değil yan yana: panele bakan
     kişi "ne bekliyor, ne bağlı, ne oldu" sorularını tek ekranda
     görebilmeli. Okunaklılık için sütun sayısı yere göre düşüyor;
     dar ekranda tek sütuna iniyor. */
  .board { max-width: 1320px; display: grid; gap: 16px; align-items: start; }
  /* grid-template-columns SART ve `min-width: 0` onun yerine GECMIYOR.
     Ikisi ayri soruyu cevapliyor: `min-width: 0` .col'un KENDISININ
     kuculmesine izin veriyor, ama .col bir grid ve acik sutunu yoksa ortuk
     sutun `auto` oluyor -- yani en genis cocugunun MAX-CONTENT'ine gore
     buyuyor. Sonucu olculdu (QA turu, canlida, 375 piksellik ekran): hesap
     satirlari sutunu 619 piksele sisiriyordu ve o sutundaki BUTUN kutular
     653'e cikip sayfayi 827'ye tasitiyordu. minmax(0, 1fr) sutunu kaba
     bagliyor: 827 -> 454.
     Masaustunde etkisiz, olculdu: .col genislikleri 992/992, degismiyor. */
  .col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
  .history { grid-template-columns: 1fr; }
  @media (min-width: 900px) {
    .history { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* Sutun atamalari .board'A BAGLI, serbest degil.
     Once serbestti (.side { grid-column: 2 }) ve studio.html kendi kenar
     cubuguna da .side diyor -- kendi gridi 260px 1fr. 1100px ustunde bu
     kural stüdyonun kenar cubugunu 2. sutuna itiyordu: sohbet 260px'e
     sikisiyor, asama listesi 518px bos genislikte duruyordu. Tam tersi.
     Ve yalnizca 1100px USTUNDE, yani stüdyonun gercekten kullanildigi
     genislikte. Tarayicida goruldu, hicbir test gormedi. */
  @media (min-width: 1100px) {
    .board { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
    /* DOGRUDAN COCUK, torun degil. grid-column yalnizca bir grid
       OGESINDE anlamli, yani yalnizca .board'un kendi cocugunda --
       daha derindeki bir .side bu gridin ogesi degil.
       Yorumun ustte anlattigi hata tam olarak buydu ve torun
       seciciyle yalnizca YARIM cozulmustu: kural .board'a baglandi
       ama hala her derinlige iniyordu, yani studio.html'in kendi
       kenar cubugu .board'un ICINE girdigi an ayni hata geri
       geliyordu. Faz 4'te tam o oluyordu. */
    .board > .main { grid-column: 1; }
    .board > .side { grid-column: 2; }
    .board > .history, .board > .wide { grid-column: 1 / -1; }
  }

  .panel { min-width: 0; }
  .panel-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
  .panel-head h2 { margin: 0; }
  .badge {
    font-size: 11px; font-weight: 600; color: var(--muted); background: var(--chip);
    padding: 1px 8px; border-radius: 99px; min-width: 22px; text-align: center;
  }
  /* Sayı gelene kadar boş bir hap gibi duruyordu; yüklenirken göze çarpıyor. */
  .badge:empty { display: none; }
  /* AYNI KURAL .tag icin ve ayni sebeple. Mod rozeti isaretlemede "…"
     ile aciliyordu ve oturum COZULENE KADAR oyle kaliyordu -- yani
     oturumsuz ziyaretcide hic cozulmuyordu. Tarayicida goruldu. */
  .tag:empty { display: none; }
  .box {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px;
  }
  .box.tight { padding: 12px 16px; }
  /* Platform kutusu katlandi ve basligi <h3> yerine <summary> oldu.
     Agirligi korumak gerekiyor: ayni satir aniden govde metni gibi
     gorunurse kutu basligini kaybediyor. Isaretcinin yer kaplamasi da
     bilincli -- tiklanabilir oldugu gorunmeli. */
  details.box > summary {
    font-size: 1.05rem; font-weight: 600; cursor: pointer;
    /* Dokunma hedefi: 44px'lik satir yuksekligi kucuk ekranda parmakla
       acilabilsin diye. */
    min-height: 44px; display: flex; align-items: center; gap: 8px;
  }
  details.box[open] > summary { margin-bottom: 8px; }
  /* Posta formu dar sütunda esnek sarmayla rastgele diziliyordu; sıra
     artık belli: sunucu ve port yan yana, kullanıcı ve parola tam satır. */
  .mailform { display: grid; grid-template-columns: 1fr 78px; gap: 8px; }
  .mailform #mail-user, .mailform #mail-pass, .mailform .actions { grid-column: 1 / -1; }
  /* Kutu 300 piksel ama içinde tek satır varsa metin tepede asılı kalıyordu. */
  .box.scroll:has(> .muted-note:only-child) { display: grid; place-items: center; }
  .box.scroll > .muted-note:only-child { text-align: center; max-width: 24em; }

  /* Geçmiş şeridi: yan yana duran üç kutunun biri uzayınca diğerleri
     kaymamalı. Kayma iki yerden geliyordu — başlık altındaki açıklama
     satır sayısı farklıydı, ve kutular içeriği kadar uzuyordu. İkisi de
     sabitlendi: açıklamaya taban yükseklik, kutulara ortak yükseklik.
     İçerik taşarsa kutu kendi içinde kayıyor, komşusunu itmiyor. */
  .history .panel { display: flex; flex-direction: column; }
  .history .hint { min-height: 2.8em; }
  /* min-height: 0 sart: esnek bir ogenin otomatik taban yuksekligi kendi
     icerigi kadardir, yani kaydirma yerine kutu uzar ve sayfa yine buyur.
     Bunu fark etmeden birakmak, kaydirma kurallarini yazmis olup
     calismamasi demek. */
  .history .box { flex: 1 1 auto; min-height: 0; }
  /* TAVANLI liste. .scroll'dan farki yukseklik SABIT degil tavanli:
     iki satirlik bir liste iki satir kadar yer kapliyor, elli satirlik
     bir liste sayfayi itmek yerine kendi icinde kayiyor.
     Var olma sebebi olculdu: platformlar.html'de HIC sinirli liste yoktu
     (index.html'de dort tane var) ve sayfa her yeni hesap, anahtar,
     asama ve saglayici satiriyla asagi uzuyordu. Ayni sayfaya toplu
     model ekleme gelince tek bir listede elli-yuz satir olacak.
     Sabit yukseklikli .scroll burada yanlis olurdu: uc satirlik bir
     listeye 300 piksel ayirmak, cozdugu seyden baska bir israf. */
  .box.scroll {
    height: 300px; overflow-y: auto; overflow-x: hidden; padding: 4px 16px;
    /* Yer her zaman ayrılıyor: çubuk belirip kayboldukça içerik saga sola
       oynuyordu. Çubuğun kendisi de tarayicının gri kalın çubuğu yerine
       panelin çizgi rengiyle ince bir şerit. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  /* Tavanli liste. .box GEREKTIRMIYOR ve sebebi somut: bu listeler
     zaten bir section.box'in icinde duruyor, .box eklemek ic ice
     cerceve demek. Tasidigi tek sey davranis. */
  .capped {
    max-height: 340px; overflow-y: auto; overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .box.scroll::-webkit-scrollbar, .capped::-webkit-scrollbar { width: 8px; }
  .box.scroll::-webkit-scrollbar-track, .capped::-webkit-scrollbar-track { background: transparent; }
  .box.scroll::-webkit-scrollbar-thumb, .capped::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 99px;
    border: 2px solid var(--panel);
  }
  .box.scroll:hover::-webkit-scrollbar-thumb, .capped:hover::-webkit-scrollbar-thumb { background: var(--muted); }
  .board .card { margin-bottom: 0; }
  /* Önizleme LinkedIn gibi beyaz; açık temada beyaz kartın üstünde
     kayboluyordu. Sarmalayıcı sayfa rengine çekilince sınır görünüyor. */
  #pending .card { background: var(--bg); }
  .board #pending .card + .card { margin-top: 12px; }
  .bar { display: flex; align-items: center; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
  /* URUN ADI serif: panelle anlatim sayfalari ayni kimligi tasisin.
     h2 BILEREK disarida -- o bir baslik degil bir ETIKET (13px, buyuk
     harf, sonuk) ve serif orada karakter degil kararsizlik olurdu. */
  h1 {
    font-family: var(--font-display);
    font-size: 18px; margin: 0; font-weight: 600; letter-spacing: 0;
  }
  .tag {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    background: var(--chip); color: var(--muted); padding: 3px 8px; border-radius: 99px;
  }
  /* Uyari rozeti. .tag ile ayni bicimde ama uyari renginde: arizayi
     anlatan bir rozet, yanindaki notr cipe BIREBIR benziyorsa uyarmiyor.
     Buyuk harfe cevirme de kalkiyor -- rozetin metni bir cumle, etiket
     degil. */
  .tag.warn {
    background: transparent; border: 1px solid var(--warn); color: var(--warn);
    text-transform: none; letter-spacing: 0; font-size: 12px;
  }
  a.tag { text-decoration: none; }
  a.tag:hover { border-color: var(--fg); color: var(--fg); }

  .spacer { flex: 1; }
  button {
    font: inherit; font-size: 13px; padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    cursor: pointer; transition: background .12s, border-color .12s;
  }
  button:hover { border-color: var(--muted); }
  button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  button.danger { color: var(--danger); }
  button:disabled { opacity: .45; cursor: default; }
  /* Butona benzeyen baglanti: sayfalar arasi gecis icin. */
  .backlink {
    font: inherit; font-size: 13px; padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    text-decoration: none; display: inline-block;
  }
  .backlink:hover { border-color: var(--muted); }

  /* Gezinme seridi. Baslik cubugundan AYRI bir satir ve bu bilincli:
     yapilan is (uret, tick, yenile) ile gidilen yer ayni satira
     dizildiginde hangisinin ne oldugu okunmuyordu -- ve olculdu, serit
     olmadan bile cubuk 1280 pikselde iki satira tasiyordu.
     Seridi nav.js kuruyor: markup dort sayfada kopyalanirsa biri
     otekilerden ayrisir, capraz sorgu tam olarak boyle menude hic
     gorunmedi. */
  .nav {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding-top: 2px; padding-bottom: 10px;
  }
  .nav a {
    font-size: 13.5px; color: var(--muted); text-decoration: none;
    padding: 2px 0; border-bottom: 2px solid transparent;
  }
  .nav a:hover { color: var(--ink); }
  /* Bulunulan sayfa. Renk TEK BASINA tasimiyor: altindaki cizgi ve
     kalinlik da soyluyor, ve isaret aria-current olarak da duruyor. */
  .nav a[aria-current="page"] {
    color: var(--ink); font-weight: 600; border-bottom-color: var(--accent);
  }
  main { padding: 22px 0 60px; }
  h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
       margin: 30px 0 12px; font-weight: 600; }
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; margin-bottom: 12px;
  }
  .card.flash { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
          font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .meta .chip { background: var(--chip); padding: 2px 8px; border-radius: 99px; }
  /* Dis icerik isareti: uyari, kanit degil. Renk tek basina bilgi
     tasimiyor -- metni de var ("dis icerik okundu"), ayrintisi title'da. */
  .meta .chip.warn { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
  textarea {
    width: 100%; min-height: 150px; resize: vertical; font: inherit; line-height: 1.6;
    padding: 12px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg); color: var(--ink);
  }
  .actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
  /* Tarayıcının kendi dosya düğmesi Arial, beyaz ve yazısı hep İngilizce —
     panelin içinde yamalı duruyordu ve dil seçimini dinlemiyordu. Girdi
     görünmez, etiket düğme gibi davranıyor. */
  .filepick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .filepick span {
    display: inline-block; font-size: 13px; padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    cursor: pointer;
  }
  .filepick:hover span { border-color: var(--muted); }
  .filepick input[type="file"]:focus-visible + span { outline: 2px solid var(--accent); }
  /* Tek kural: tür tür saymak yerine dosya/kutucuk dışındaki her girdi.
     Önceki liste type="email" içermiyordu ve giriş ekranındaki e-posta
     alanı tarayıcının varsayılanıyla kalıyordu. */
  input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
    font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  }
  input[type="datetime-local"] { padding: 6px 9px; }

  /* Acilir liste girdilerle ayni dili konussun. Tarayicinin varsayilani
     hem kendi cercevesini hem kendi okunu getiriyordu ve koyu temada
     acik gri bir kutu olarak siritiyordu. appearance:none ikisini de
     kaldiriyor, ok arka plan goruntusu olarak yeniden ciziliyor. */
  /* max-width + min-width: 0 -- bir <select> ICERIGINE gore boyutlaniyor ve
     varsayilan olarak kuculmuyor. Olculdu: studyodaki saglayici secicisinin
     min-content'i 343 piksel ve bunu en uzun secenegi belirliyor
     ("GoogleAiStudio — models/gemini-3-flash-preview"); secici kuculemedigi
     icin kutusu ve sayfa 375 piksellik ekranda 393'e tasiyordu. Veriye bagli
     bir tasma: daha uzun bir model adi daha cok tasitiyor. */
  select {
    max-width: 100%; min-width: 0;
    font: inherit; font-size: 13px; padding: 7px 28px 7px 10px; border-radius: 8px;
    border: 1px solid var(--line); background-color: var(--bg); color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 13px center, right 8px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  select:hover { border-color: var(--muted); }
  select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* Acilan listenin kendi ogeleri isletim sisteminden geliyor; en azindan
     renkleri temadan alsin. */
  select option { background: var(--panel); color: var(--ink); }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

  /* Odak halkası her girdide aynı; bazılarında tarayıcının kendi halkası
     çıkıyordu. */
  /* BAGLANTILAR DA KAPSANIYOR ve bu bir eksikti: .backlink ve gezinme
     seridindeki baglantilar tarayicinin kendi halkasinda kaliyordu --
     page.css'in yorumunun "vurgu renkli bir baglantinin uzerinde zayif
     kaliyor" dedigi durumun ta kendisi. page.css "panel.css'tekiyle
     AYNI" diyordu; inceleme ikisinin ayni OLMADIGINI olctu, ve dogru
     olan iddiayi degil kurali duzeltmekti. */
  a:focus-visible,
  input:focus-visible, textarea:focus-visible, button:focus-visible,
  .tab:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
    border-radius: 4px;
  }
  textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

  /* Chrome otomatik doldurduğu alanı açık maviye boyuyor ve background
     ile değiştirilemiyor; tek yol içeriden gölge. Koyu temada alan
     bembeyaz kalıyordu. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    caret-color: var(--ink);
    /* Geçiş süresini uzatmak, tarayıcının rengi geri boyamasını engelliyor. */
    transition: background-color 100000s ease-in-out 0s;
  }
  .empty { color: var(--muted); font-size: 14px; padding: 18px; text-align: center;
           border: 1px dashed var(--line); border-radius: var(--radius); }
  .row { display: flex; gap: 10px; align-items: baseline; padding: 9px 0;
         border-bottom: 1px solid var(--line); font-size: 13px; }
  .row:last-child { border-bottom: 0; }
  .row code {
    font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace;
    /* Uzun bir red notu ya da URN satiri yatay olarak tasirdi; kutu
       yalnizca dikey kayiyor, tasan sey gorunmez olurdu. */
    max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tg-link { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; line-height: 1.6; }
  .tg-link code { font-size: 14px; font-family: ui-monospace, SFMono-Regular, monospace; user-select: all; }
  .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .state { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
  .state.done { color: var(--accent); }
  .state.failed { color: var(--danger); }
  .state.ready, .state.inprogress { color: var(--warn); }
  /* Elle bakilacak is: renk tek basina bilgi tasimiyor, satirin altinda
     aciklamasi ve eylemleri var. */
  .state.stuck { color: var(--danger); }
  .stuck { margin: 2px 0 12px; }
  .stuck .actions { margin-top: 6px; }
  .muted-note { color: var(--muted); font-size: 13px; }
  .conn { display: flex; gap: 10px; align-items: center; padding: 9px 0;
          border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
  .conn:last-child { border-bottom: 0; }
  .conn .name { font-weight: 600; min-width: 90px; }
  .row .name { font-weight: 600; min-width: 120px; font-size: 12px; }
  .conn .detail { color: var(--muted); font-size: 12px; }
  /* Dar sütunda uzun açıklama düğmeyi alt satıra itiyordu. */
  .conn .grow { flex: 1; min-width: 0; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
  .dot.on { background: var(--accent); }
  .dot.off { background: var(--danger); }

  /* LinkedIn önizlemesi. Onaylarken metnin akışta nasıl duracağını görmek
     gerekiyor: satır sonları, kısalma, hashtag rengi. Panelin geri kalanı
     bizim tipografimizi kullanıyor, burası bilerek LinkedIn'inki. */
  :root { --li-blue: #0a66c2; --li-surface: #fff; --li-ink: #000000e6; --li-sub: #00000099; --li-line: #0000001a; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --li-blue: #70b5f9; --li-surface: #1b1f23; --li-ink: #ffffffe6;
      --li-sub: #ffffff99; --li-line: #ffffff26;
    }
  }
  .li {
    background: var(--li-surface); border: 1px solid var(--li-line); border-radius: 8px;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    color: var(--li-ink); overflow: hidden;
  }
  .li-head { display: flex; gap: 8px; padding: 12px 16px 0; align-items: flex-start; }
  .li-av {
    width: 48px; height: 48px; border-radius: 50%; flex: none;
    background: var(--li-blue); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 18px; font-weight: 600; letter-spacing: .02em;
  }
  .li-who { min-width: 0; line-height: 1.3; padding-top: 2px; }
  .li-name { font-size: 14px; font-weight: 600; }
  .li-sub { font-size: 12px; color: var(--li-sub); }
  .li-body {
    padding: 8px 16px 0; font-size: 14px; line-height: 1.42; white-space: pre-wrap;
    word-break: break-word;
  }
  .li-body.clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .li-tag { color: var(--li-blue); font-weight: 600; }

  /* Yazi onizlemesi. LinkedIn taklidi DEGIL: hedef kullanicinin kendi
     sitesi ve nasil gorundugunu bilmiyoruz; taklit etmek yanlis bir soz
     olurdu. O yuzden .li'nin cercevesini paylasiyor ama tipografisi
     panelin kendisi -- gosterilen sey gorunum degil bilgi. */
  .li.art { padding-bottom: 12px; }
  .art-head { padding: 14px 16px 0; display: grid; gap: 6px; }
  .art-title { font-size: 19px; font-weight: 650; line-height: 1.25; }
  .art-desc { font-size: 13px; color: var(--li-sub); line-height: 1.45; }
  .art-facts { display: flex; gap: 6px; flex-wrap: wrap; }
  /* Rozet .li'nin ICINDE duruyor ve o kutu kendi renk kumesinde: panelin
     --chip'i acik temada beyaz kartin uzerinde kayboluyordu. */
  .li.art .chip { background: color-mix(in srgb, var(--li-ink) 8%, transparent); color: var(--li-sub); }
  .art-link { font-size: 12px; color: var(--li-sub); word-break: break-all; }
  .art-link code { font-size: 12px; }
  /* COK UZUN govde KENDI ICINDE kayiyor. Kutuyu uzatmak komsusunu
     iterdi; .capped yalnizca davranis tasiyor (yukarida). */
  .art-body {
    padding: 10px 16px 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap;
    word-break: break-word;
  }
  .art-broken { padding: 16px; font-size: 13px; color: var(--danger); line-height: 1.5; }
  /* Kaldirma uyarisi. Renk TEK BASINA bilgi tasimiyor: metnin kendisi ne
     oldugunu soyluyor, renk yalnizca onu one cikariyor. */
  .art-warn {
    margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
    line-height: 1.5; background: color-mix(in srgb, var(--warn) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  }
  .art-tr { margin: 12px 16px 0; border-top: 1px solid var(--li-line); padding-top: 10px; }
  .art-tr-head { font-size: 12px; color: var(--li-sub); margin-bottom: 6px; }
  .art-tr-row summary { font-size: 13px; cursor: pointer; padding: 4px 0; }
  .art-tr-row .art-body, .art-tr-row .art-desc { padding-left: 0; padding-right: 0; }
  .art-tr-row[open] { padding-bottom: 8px; }
  .li-more {
    padding: 0 16px; font-size: 14px; color: var(--li-sub); cursor: pointer;
    background: none; border: 0; text-align: left;
  }
  .li-more:hover { color: var(--li-blue); text-decoration: underline; border-color: transparent; }
  .li-media {
    margin-top: 10px; border-top: 1px solid var(--li-line); border-bottom: 1px solid var(--li-line);
    padding: 26px 16px; text-align: center; font-size: 12px; color: var(--li-sub);
    background: color-mix(in srgb, var(--li-ink) 5%, transparent);
  }
  .tabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--chip); padding: 3px; border-radius: 9px; }
  .tab { flex: 1; border: 0; background: none; padding: 7px; border-radius: 7px; color: var(--muted); }
  .tab.on { background: var(--panel); color: var(--ink); font-weight: 600; }
  .field { display: block; margin-bottom: 12px; }
  .field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .field input { width: 100%; }
  .auth-note { font-size: 13px; line-height: 1.5; margin: 14px 0 0; padding: 10px 12px;
               border-radius: 8px; background: var(--chip); }
  .auth-note.bad { color: var(--danger); }
  .or { text-align: center; font-size: 12px; color: var(--muted); margin: 18px 0 12px; }
  .reasons { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

  /* SEBEPSIZ RET AYRI SATIRDA. Yedi dugmeden biriyken otekilerle ayni
     agirliktaydi ve en kolay tiklanan sey en az bilgi tasiyan sey
     oluyordu. Ayirmak secimi koruyor, ucuzlugunu kaldiriyor. */
  .reasons-skip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    /* --line, iki temada da tanimli olan TEK ayirici renk. Burada once
       --line-soft yaziliyordu ve HICBIR YERDE TANIMLI DEGILDI: tanimsiz
       bir custom property var() icinde "invalid at computed-value time"
       demek, yani kisayolun butun longhand'leri initial'a dusuyor ve
       border-style: none oluyor. Cizgi ekranda hic cizilmiyordu; bulan
       mimari inceleme. */
    border-top: 1px dashed var(--line);
  }

  /* Dugme gibi davraniyor, dugme gibi gorunmuyor: bir kacis yolu, bir
     secenek degil. Odak halkasi DURUYOR -- klavyeyle gezen biri icin
     gorunmez bir dugme erisilebilir degil. */
  .link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
  }

  .link-button:hover { color: var(--fg); }
  .thumb { height: 40px; border-radius: 6px; border: 1px solid var(--line); display: block; }
  .li-shots {
    margin-top: 10px; border-top: 1px solid var(--li-line);
    border-bottom: 1px solid var(--li-line); display: grid; gap: 2px;
    background: color-mix(in srgb, var(--li-ink) 5%, transparent);
  }
  .li-shots:has(img + img) { grid-template-columns: 1fr 1fr; }
  .li-shots img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
  .li-bar {
    display: flex; margin: 4px 8px 4px; padding-top: 4px; border-top: 1px solid var(--li-line);
  }
  .li-act {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 4px; font-size: 13px; font-weight: 600; color: var(--li-sub);
    border-radius: 4px;
  }
  .li-act svg { width: 18px; height: 18px; fill: currentColor; }
  @media (max-width: 480px) {
    /* Dar ekranda etiketler iki satıra kırılıyordu; LinkedIn de burada küçültüyor. */
    .li-act { font-size: 11px; gap: 4px; padding: 10px 2px; white-space: nowrap; }
    .li-act svg { width: 15px; height: 15px; }
  }
  /* Yorum önerisi akışta post gibi değil, balon gibi duruyor. */
  .li-comment { display: flex; gap: 8px; padding: 12px 16px 16px; }
  .li-comment .li-av { width: 32px; height: 32px; font-size: 13px; }
  .li-bubble {
    background: color-mix(in srgb, var(--li-ink) 6%, transparent); border-radius: 0 8px 8px 8px;
    padding: 8px 12px; min-width: 0; flex: 1;
  }
  .li-parent { font-size: 12px; color: var(--li-sub); padding: 10px 16px 0; }
  .li-count { font-size: 11px; color: var(--muted); margin-left: 4px; }
  .li-count.over { color: var(--danger); font-weight: 600; }
  #toast {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 8px;
    font-size: 13px; opacity: 0; transition: all .2s; pointer-events: none;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* SAYFA NE YAPAR. Bolum basliklari NE oldugunu soyluyor; bu cumle
     sayfaya ilk gelenin sordugu seyi cevapliyor: "burada ne yapacagim".
     65ch degil 62ch: bu bir baslik altı cumlesi, paragraf degil.
     .wide ile iki sutunu birden kapsiyor -- yarim genislikte duran bir
     giris cumlesi, giris gibi degil not gibi gorunuyor. */
  .lede {
    font-size: 14px; line-height: 1.6; color: var(--muted);
    margin: 0 0 4px; max-width: 62ch;
  }

  .hint { font-size: 12px; color: var(--muted); margin: -2px 0 10px; line-height: 1.45; }

  @media (max-width: 560px) {
    /* Dar ekranda esnek boşluk "zaman" etiketini sağa itip girdisinden
       ayırıyordu; ikisi yan yana kalsın. */
    .actions .spacer { display: none; }
    .bar { gap: 8px; padding: 10px 0; }
    .bar button { font-size: 12px; padding: 6px 10px; }
  }

  /* IPUCU. Hover VE ODAKTA aciliyor -- yalnizca hover'a bagli bir ipucu
     klavyeyle gezen kullaniciya hic gorunmuyor, ve o kullanici tam da
     etiketten fazlasina ihtiyaci olabilecek kisi.
     title= KULLANILMIYOR: dokunmatikte hic cikmiyor ve klavyede
     gecikmeli. Ekran okuyucu tarafini nav.js ayrica bagliyor
     (aria-describedby), cunku gorsel bir kutu ekran okuyucuya hicbir
     sey soylemiyor.
     Konum ustte: bir dugmenin altinda genellikle baska bir dugme var ve
     asagi acilan ipucu onu kapatiyor. */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 0;
    z-index: 20; width: max-content; max-width: 30ch;
    background: var(--ink); color: var(--bg);
    font-size: 12px; line-height: 1.4; font-weight: 400;
    text-transform: none; letter-spacing: 0;
    padding: 6px 9px; border-radius: 6px;
    opacity: 0; pointer-events: none;
    transform: translateY(2px);
    transition: opacity .14s ease-out, transform .14s ease-out;
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1; transform: translateY(0);
  }
  /* Sagdaki dugmelerin ipucu ekrandan tasiyordu. */
  .actions > :last-child[data-tip]::after,
  .bar > :last-child[data-tip]::after { left: auto; right: 0; }
  /* Ekran okuyucu icin nav.js'in urettigi kopya. */
  .tip-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* DOKUNMA HEDEFI: parmak fareden kalin.
     Olcut GENISLIK DEGIL ISARETCI TURU ve fark gercek: dokunmatik bir
     dizustu 1500 piksel genis ama parmakla kullaniliyor, bir masaustu
     tarayici 500 piksele kucultulse de fareyle. Genislige bakan bir
     kural ikisini de yanlis tarafa koyuyor.
     Fare tarafi DEGISMIYOR: 44 piksel her yerde uygulanirsa panelin
     yogunlugu bozulur -- bu ekranda yan yana cok dugme var ve hepsini
     buyutmek asil isi asagi itiyordu.
     Alt sinir olarak min-height/min-width: metni uzun bir dugme zaten
     genis, kisa olan tabana oturuyor. */
  @media (pointer: coarse) {
    button, .backlink, .tab, select, summary {
      min-height: 44px;
    }
    /* select BURAYA sonradan girdi. Once genislik tabanini kendi ICERIGI
       tutuyordu (olculen min-content 343 piksel); dar ekran duzeltmesi
       `min-width: 0` ekleyince o taban kalkti ve sikisan bir satirda select
       44'un altina inebilir hale geldi. Yorumun kendi gerekcesi zaten bunu
       soyluyordu -- "metni uzun bir dugme zaten genis, kisa olan tabana
       oturuyor" -- ve select artik "kisa olan". */
    button, .backlink, select {
      min-width: 44px;
    }
    /* Komsu hedefler arasinda bosluk: yan yana iki 44 piksellik dugme,
       aralarinda bosluk yoksa tek bir hedef gibi davraniyor. */
    .actions, .bar { gap: 10px; }
  }

  /* Dar ekranda dugme KUCULMUYOR.
     Onceki hali font ve dolguyu dusuruyordu (12px/6px 10px), yani hedef
     dar ekranda ~28 piksele iniyordu -- tam da parmakla kullanilma
     ihtimalinin en yuksek oldugu yerde en kucuk. Ters yon.
     Yazi hala kuculuyor cunku sorun oydu (satir tasiyordu); kuculmeyen
     sey DOKUNULACAK ALAN. */
  @media (max-width: 560px) and (pointer: coarse) {
    .bar button { padding: 6px 12px; }
  }

  /* HAREKET BIR TERCIH DEGIL, BAZILARI ICIN BIR ENGEL.
     Hareket vestibuler duyarliligi olan kullanicilarda bas donmesi ve
     bulanti yapiyor; isletim sisteminde "hareketi azalt" diyen kullanici
     bunu zaten soylemis oluyor. Blok EN SONDA cunku sonradan eklenen bir
     gecisi de kapsamasi gerekiyor -- ozgulluk degil sira belirliyor.
     Sifir degil 0.01ms: sifir sure transitionend olayini hic
     tetiklemiyor ve ona bagli bir kod sessizce asili kaliyor. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }