/* Marka yazısını üçüncü taraf bağlantı kurmadan yerel Inter dosyasıyla gösterir. */
@font-face{font-family:"Inter";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Temel sayfa renklerini ve Türkçe metin tipografisini tanımlar. */
:root{color-scheme:dark;--bg:#091219;--panel:#101f26;--text:#eef5f3;--muted:#a8bdbb;--mint:#97ddc5;--line:#24383d}
/* Boyut hesaplarında kenarlık ve iç boşluğu dahil eder. */
*{box-sizing:border-box}
/* Bölüm bağlantılarında yumuşak kaydırma sağlar. */
html{scroll-behavior:smooth}
/* Genel sayfa zeminini ve okunabilir satır aralığını uygular. */
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 'Segoe UI',Arial,sans-serif}
/* Bağlantıları site rengine uyarlar. */
a{color:inherit;text-decoration:none}
/* Form elemanlarının aynı tipografiyi kullanmasını sağlar. */
button,input,textarea{font:inherit}
/* Klavye odağını görünür yapar. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
/* Genel içeriği merkezler ve kenar boşluğu verir. */
.wrap{max-width:1180px;margin:auto;padding:0 32px}
/* Başlığı gövdeden ince çizgiyle ayırır. */
header{border-bottom:1px solid var(--line)}
/* Ana menüyü yatay yerleştirir. */
nav.wrap{min-height:90px;display:flex;align-items:center;gap:32px}
/* Marka adını güçlü tipografiyle gösterir. */
.brand{font-family:"Inter",sans-serif;font-size:23px;font-weight:600;letter-spacing:-.7px;line-height:1.2;margin-right:auto;text-transform:none;color:#eef5f3;white-space:nowrap}
/* Marka noktasına mint vurgu verir. */
.brand span{color:var(--mint)}
/* Marka bağlantısında yalnızca noktanın mint olmasını korur. */
.brand:hover,.brand:focus-visible{color:#eef5f3}
/* Üst menü bağlantılarını düzenler. */
.links{display:flex;gap:25px;color:var(--muted);font-size:13px}
/* Bağlantı vurgusunu mint tonuna çevirir. */
a:hover{color:var(--mint)}
/* Ana tanıtım bölümünün hafif ışık geçişini oluşturur. */
.hero{padding:77px 0 65px;background:radial-gradient(ellipse at 85% 40%,#16434280,transparent 55%)}
/* Tanıtım ve dekoratif terminali iki sütuna ayırır. */
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:60px}
/* Kısa bölüm etiketlerine karakter aralığı verir. */
.eyebrow,.tag{font-size:11px;letter-spacing:2px;font-weight:650;color:var(--mint);text-transform:uppercase}
/* Ana başlığı ekran genişliğine göre ölçekler. */
h1{font-size:clamp(34px,4.3vw,58px);line-height:1.15;letter-spacing:-2px;font-weight:650;margin:22px 0}
/* Tanıtım metnini okunabilir genişlikte tutar. */
.intro,.lead{color:var(--muted);max-width:750px;font-size:17px}
/* Ana eylem bağlantıları arasında boşluk bırakır. */
.hero-actions{display:flex;gap:22px;align-items:center;margin-top:28px}
/* Birincil eylem düğmesinin kontrastını sağlar. */
.primary{display:inline-block;background:var(--mint);color:#102423;padding:11px 22px;border:0;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer}
/* İkincil metin rengini tanımlar. */
.quiet,.muted{color:var(--muted)}
/* Dekoratif terminal çerçevesini çizer. */
.terminal{background:#0b191fc9;border:1px solid #31504f;border-radius:12px;transform:rotate(-2deg);font:13px/2 Consolas,monospace}
/* Terminal üst başlığını ayırır. */
.terminal-top{padding:13px 18px;border-bottom:1px solid var(--line);color:#8faea6;font-size:11px;display:flex;justify-content:space-between}
/* Terminal komut alanına boşluk verir. */
.terminal-body{padding:23px;color:var(--mint)}
/* Terminal açıklama metnini yumuşatır. */
.terminal-body span{color:#8faea6}
/* Kategori ve etiket satırlarını sarılabilir yapar. */
.topics,.tags{display:flex;gap:10px;flex-wrap:wrap;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Kategori bağlantılarını rozet olarak gösterir. */
.topic{border:1px solid var(--line);color:var(--muted);padding:7px 18px;border-radius:6px;font-size:12px}
/* Seçili kategori ve üzerine gelme durumunu vurgular. */
.topic.selected,.topic:hover{color:var(--mint);background:#19342f;border-color:#385e53}
/* İçerik bölümlerine dikey boşluk verir. */
.section{padding-top:43px}
/* Bölüm başlığını ve yardımcı metni hizalar. */
.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:21px}
/* İkincil başlıkların boyutunu dengeler. */
h2{font-size:23px;letter-spacing:-.5px}
/* Küçük bağlantıları mint vurguyla gösterir. */
.small-link,.read{font-size:12px;color:var(--mint)}
/* Öne çıkan makaleyi iki sütun halinde gösterir. */
.featured{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(120deg,#12262b,#101c23)}
/* Kapak yoksa dekoratif topoloji alanı gösterir. */
.feature-art{min-height:285px;display:grid;place-items:center;background:radial-gradient(ellipse,#24554d80,transparent 70%)}
/* Gerçek kapak görsellerini alanlarına yerleştirir. */
.feature-art img{width:100%;height:100%;object-fit:cover}
/* Dekoratif şemanın boyutunu belirler. */
.diagram{width:80%;color:#a4dccc;text-align:center;font:12px Consolas,monospace}
/* Şema ana düğümünü çizer. */
.node{border:1px solid #508e7e;background:#16352f;padding:16px;border-radius:6px;width:70%;margin:auto}
/* Şema alt katmanlarını hizalar. */
.branches{display:flex;justify-content:space-between;gap:8px;margin-top:35px}
/* Şema alt düğümlerini çerçeveler. */
.branches span{border:1px solid #508e7e;padding:12px 7px;border-radius:5px}
/* Öne çıkan makale metnine iç boşluk verir. */
.feature-copy{padding:34px 36px}
/* Öne çıkan başlığın boyutunu ayarlar. */
.featured h3{font-size:27px;line-height:1.3;letter-spacing:-.8px;margin:14px 0}
/* Kart ve özet metinlerini ikincil renkte gösterir. */
.feature-copy p,.card p,.project p{color:var(--muted);font-size:13px}
/* Makale tarih ve okuma bilgilerini yerleştirir. */
.meta{font-size:11px;color:#9bb6af;display:flex;gap:16px;margin-top:22px;justify-content:space-between}
/* Makale devam bağlantısına boşluk verir. */
.read{display:inline-block;margin-top:22px;font-weight:600}
/* Makale kartlarını üç sütuna dağıtır. */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
/* Makale kartlarının çerçevesini oluşturur. */
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0e1c23;transition:transform .2s,border-color .2s}
/* Kartlara hafif etkileşim vurgusu verir. */
.card:hover{transform:translateY(-3px);border-color:#41695e}
/* Kart kapak alanının boyutunu sabit tutar. */
.card-art{width:100%;height:150px;object-fit:cover;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#25594c80,transparent 75%),#10282a;color:#a6d5c5;font:12px Consolas,monospace}
/* Kart metnine boşluk verir. */
.card-body{padding:22px}
/* Kart başlıklarını dengeli boyutta gösterir. */
.card h3{font-size:18px;line-height:1.4;margin:11px 0}
/* Proje tanıtım alanını çerçeveler. */
.project{margin:45px 0 55px;padding:27px 32px;border:1px solid #35544b;border-radius:10px;display:flex;align-items:center;gap:20px;background:linear-gradient(110deg,#16362d66,#101f26)}
/* Proje başlığını kompakt gösterir. */
.project h2{font-size:20px;margin:5px 0}
/* Proje bağlantısını sağa yerleştirir. */
.project a{margin-left:auto;white-space:nowrap}
/* Alt bilgi alanını gövdeden ayırır. */
footer{border-top:1px solid var(--line);padding:27px 0;color:#9bb4ae;font-size:11px}
/* Alt bağlantıları yatay ve sarılabilir yerleştirir. */
.footer-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
/* Telif metnini sola yaslar. */
.footer-row span{margin-right:auto}
/* Metin düğmelerini sade bağlantı görünümünde tutar. */
.text-button{background:none;border:0;color:var(--muted);font-size:11px;cursor:pointer}
/* Arşiv ve okunabilir bilgi sayfalarına alt boşluk verir. */
.archive,.readable{padding-bottom:65px}
/* Uzun metin sayfalarının genişliğini sınırlar. */
.readable{max-width:800px;padding-top:45px}
/* Arama formunu sınırlı genişlikte gösterir. */
.search-form{max-width:600px;margin:30px 0}
/* Arama alanı ve düğmesini hizalar. */
.search-form div{display:flex;gap:12px}
/* Form etiketlerine net boşluk ve renk verir. */
label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
/* Güvenli form elemanlarının görünümünü ayarlar. */
input,textarea{width:100%;background:#09171d;border:1px solid #375247;border-radius:5px;padding:10px 12px;color:var(--text)}
/* Yorum ve mesaj metninin dikey yeniden boyutlandırılmasına izin verir. */
textarea{resize:vertical;min-height:120px}
/* Sayfalama bağlantılarını düzenler. */
.pagination{display:flex;gap:30px;justify-content:center;padding:30px}
/* Makale hiyerarşi satırının görünümünü ayarlar. */
.breadcrumb{font-size:12px;color:var(--muted);margin:32px 0}
/* Makale başlık alanını sınırlı genişlikte tutar. */
.article-intro{max-width:900px;padding-bottom:25px}
/* Yazar ve tarih bilgilerini hizalar. */
.author{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:12px;flex-wrap:wrap;margin:25px 0}
/* Yazar avatarı için basit marka rozeti gösterir. */
.avatar{display:grid;place-items:center;width:42px;height:42px;background:#1b3c32;border:1px solid #42685b;border-radius:50%;color:var(--mint)}
/* Makale kapağının kenar boşluğunu sıfırlar. */
.cover{margin:0 0 30px}
/* Makale kapak görselini kırpmadan duyarlı gösterir. */
.cover img{width:100%;height:auto;max-height:500px;object-fit:cover;border-radius:10px}
/* Kapak açıklamasını daha küçük gösterir. */
figcaption{font-size:11px;color:var(--muted)}
/* Makale ve içindekileri iki sütuna yerleştirir. */
.article-layout{display:grid;grid-template-columns:minmax(0,750px) 240px;gap:60px}
/* Uzun makale metnini okunabilir renkte gösterir. */
.article{color:#c6d5d2;font-size:16px;overflow-wrap:anywhere}
/* Makale başlıklarını bölüm aralığıyla ayırır. */
.article h2,.article h3{color:var(--text);margin:34px 0 12px;scroll-margin-top:20px}
/* Makale başlangıcındaki fazladan başlık boşluğunu kaldırır. */
.article h2:first-child{margin-top:0}
/* Makale görsellerini sütun genişliğinde sınırlar. */
.article img{max-width:100%;height:auto}
/* Alıntı ve not bloklarına mint çizgi verir. */
blockquote,.notice{margin:24px 0;padding:17px 20px;border:1px solid #345649;border-left:3px solid var(--mint);border-radius:6px;background:#152b254f;font-size:14px}
/* Kod bloklarını okunabilir ve kaydırılabilir tutar. */
pre{position:relative;padding:46px 20px 20px;background:#0b171d;border:1px solid var(--line);border-radius:8px;overflow:auto;color:#a9ddc9;font:13px/1.9 Consolas,monospace}
/* Kopyalama düğmesini kod bloğunun köşesine yerleştirir. */
.copy-button{position:absolute;right:12px;top:8px;background:#17322a;border:1px solid #375247;color:var(--mint);border-radius:4px;padding:3px 10px;font-size:11px;cursor:pointer}
/* Teknik tabloların satırlarını ayırır. */
table{width:100%;border-collapse:collapse;font-size:13px}
/* Tablo hücrelerinin boşluklarını düzenler. */
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line)}
/* İçindekiler alanını kaydırmada görünür tutar. */
.toc{position:sticky;top:25px;align-self:start;border-left:1px solid var(--line);padding-left:23px;font-size:12px}
/* İçindekiler başlığını küçük mint harflerle gösterir. */
.toc h2{font-size:11px;letter-spacing:2px;color:var(--mint)}
/* İçindekiler bağlantılarını dikey sıralar. */
.toc a{display:block;color:var(--muted);padding:7px 0}
/* Yorum bölümüne dikey boşluk ekler. */
.comments{margin:35px 0}
/* Yorum ve form alanlarını çerçeveler. */
.comment,.form{padding:23px;background:#0e1c23;border:1px solid var(--line);border-radius:8px;margin:20px 0}
/* Yorum tarihini sağda gösterir. */
.comment time{float:right;color:var(--muted);font-size:11px}
/* Yorum metnini okunabilir boyutta gösterir. */
.comment p{font-size:14px;color:var(--muted)}
/* Yönetici yanıtını yorumdan ayırır. */
.reply{border-left:2px solid #426b59;padding-left:15px;font-size:13px}
/* Form yardımcı metnini küçültür. */
.hint{font-size:12px;color:var(--muted)}
/* Form hatalarını belirgin gösterir. */
.errorlist{color:#ffd3bd;font-size:13px}
/* Form başarı mesajlarını mint renkle vurgular. */
.notifications{color:var(--mint)}
/* Taslak önizleme şeridini gösterir. */
.preview{text-align:center;background:#173b2d;padding:10px;color:var(--mint);font-size:12px}
/* İlgili makaleler bölümüne alt boşluk verir. */
.related{padding-bottom:55px}
/* Erişilebilir içeriğe geç bağlantısını normalde ekran dışında tutar. */
.skip{position:absolute;left:-10000px}
/* Klavye odağında atlama bağlantısını görünür yapar. */
.skip:focus{left:12px;top:12px;padding:10px;background:var(--mint);color:var(--bg);z-index:10}
/* Tablet ekranlarında sütunları azaltır. */
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.terminal{display:none}.grid{grid-template-columns:1fr 1fr}.featured{grid-template-columns:1fr}.article-layout{grid-template-columns:1fr;gap:25px}.toc{grid-row:1;position:static;border:1px solid var(--line);padding:18px}.toc a{display:inline-block;margin-right:15px}.links{gap:15px}}
/* Telefon ekranlarında içeriği tek sütuna dönüştürür. */
@media(max-width:600px){.wrap{padding-left:20px;padding-right:20px}nav.wrap{flex-wrap:wrap;padding-top:18px;padding-bottom:18px;gap:13px}.brand{width:100%;font-size:17px}.links{width:100%;flex-wrap:wrap;gap:15px;font-size:12px}.hero{padding:45px 0}.grid{grid-template-columns:1fr}.project{flex-direction:column;align-items:flex-start;padding:24px}.project a{margin-left:0}.section-title{flex-wrap:wrap}.feature-copy{padding:25px}.featured h3{font-size:24px}.topic{padding:6px 12px}.search-form div{flex-wrap:wrap}.article{font-size:15px}.article table{display:block;overflow:auto}.comment time{float:none;display:block}}
/* Hareket azaltma tercihini korur. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
/* Ana tanıtım başlığının ikinci satırını mevcut site rengiyle vurgular. */
.hero h1 span{color:var(--mint)}
/* Mobil menü düğmesini masaüstünde gizler. */
.menu-toggle{display:none;background:var(--panel);border:1px solid #42685b;color:var(--mint);border-radius:6px;padding:8px 16px;min-height:44px;cursor:pointer}
/* Menü ve yardımcı yazıları daha okunabilir boyuta getirir. */
.links{font-size:14px}.links a{display:flex;align-items:center;min-height:44px}.links a[aria-current=page]{color:var(--mint);text-decoration:underline;text-underline-offset:7px}.meta,.author,.breadcrumb,footer,.text-button,.hint{font-size:13px}.topic{min-height:44px;display:inline-flex;align-items:center}.copy-button{min-height:44px;font-size:13px}.toc a{min-height:44px}.footer-row a,.text-button{min-height:44px;display:inline-flex;align-items:center}
/* Form metin alanlarını kompakt tutarken kullanıcı büyütmesine izin verir. */
textarea{height:160px;min-height:120px}.form label{font-size:14px}
/* Görselsiz kartları kategoriye özgü simge ve renklerle ayrıştırır. */
.card-art:not(img){flex-direction:column;gap:12px;font-size:14px}.category-symbol{font-size:40px;line-height:1}.art-network{background:radial-gradient(ellipse,#244657,transparent),#11222b}.art-projeler{background:radial-gradient(ellipse,#394350,transparent),#17232a}.art-sistem{background:radial-gradient(ellipse,#285044,transparent),#10282a}.art-altyapi{background:radial-gradient(ellipse,#454e31,transparent),#182720}
/* Hakkımda içeriğine mevcut kategorilerden bir keşif alanı ekler. */
.about-topics{margin-top:35px;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.about-topics p{color:var(--muted)}
/* Dar ekranlarda erişilebilir açılır menüyü ve okunabilir boşlukları uygular. */
@media(max-width:900px){nav.wrap{flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:16px;min-height:78px}.brand{width:auto;font-size:17px}.menu-toggle{display:block}.links{width:100%;flex-direction:column;gap:4px;font-size:15px}.js-menu .links{display:none}.js-menu .links.is-open{display:flex}.links a{padding:8px 12px;border-radius:5px}.links a:hover{background:var(--panel)}.hero-actions{flex-wrap:wrap}.about-topics{padding:20px}.meta{gap:10px;flex-wrap:wrap}}

/* Okları yazı tipinden bağımsız ve erişilebilir SVG çizgileriyle gösterir. */
.icon-arrow{width:1.1em;height:1.1em;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-back{transform:rotate(180deg)}

/* Kartları satır boyunca eşit yükseklikte tutarak alt bilgiyi tabana hizalar. */
.card>a{display:flex;flex-direction:column;height:100%;min-width:0}.card-art{flex-shrink:0}.card-body{display:flex;flex-direction:column;flex:1;min-width:0}.card-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.75;max-height:5.25em}.card-body .meta{margin-top:auto;padding-top:20px;align-items:center}.card-body .meta>span{white-space:nowrap}
/* Seçili kategoriyi ve yalnızca görünür yazı sayısını belirginleştirir. */
.topic{display:inline-flex;align-items:center;gap:8px;min-height:44px}.topic.selected{background:var(--mint);border-color:var(--mint);color:#102423;font-weight:700}.topic-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;border-radius:12px;background:#ffffff12;font-size:11px}.topic.selected .topic-count{background:#10242318}
/* Giriş alanını kısaltarak öne çıkan yazıyı daha erken gösterir. */
.hero{padding:48px 0 40px}.hero-actions{margin-top:22px}
/* Dar ekranlarda kart ve arama kontrollerinin taşmasını önler. */
@media(max-width:600px){.hero{padding:32px 0 28px}.card-body .meta{gap:8px}.search-form>div{display:flex;gap:8px;min-width:0}.search-form input{min-width:0;flex:1;width:100%}.search-form button{flex-shrink:0}.form input,.form textarea{max-width:100%}.topic{padding:7px 12px}}

/* Projeleri amaç, aşama ve teknoloji bilgileriyle iki sütunlu sunar. */
.projects-page{padding-bottom:50px}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}.project-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}.project-card img{display:block;width:100%;height:220px;object-fit:cover}.project-content{padding:28px;display:flex;flex-direction:column;flex:1;min-width:0}.project-content h2{line-height:1.35;margin:18px 0 10px}.project-content h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--mint);margin:20px 0 5px}.project-content p{color:var(--muted);font-size:14px;margin:8px 0;overflow-wrap:anywhere}.project-stage{align-self:flex-start;border:1px solid #385e53;border-radius:20px;padding:4px 12px;color:var(--mint);font-size:12px}.technology-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.technology-list span{border:1px solid var(--line);padding:4px 10px;border-radius:5px;font-size:12px;color:var(--muted);overflow-wrap:anywhere;max-width:100%}.project-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:22px}.project-actions a{min-height:44px}
/* Mobil projeleri taşmadan tek sütuna yerleştirir. */
@media(max-width:700px){.projects-grid{grid-template-columns:1fr}.project-content{padding:20px}.project-card img{height:180px}}

/* Proje detayındaki aşama ve teknolojileri okunabilir bilgi kutusunda sunar. */
.project-detail{margin:0 0 30px;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0}.project-detail h2{margin:0 0 20px;font-size:20px}.project-detail dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;margin:0}.project-detail dt{color:var(--mint);font-size:13px;font-weight:650;margin-bottom:10px}.project-detail dd{margin:0;overflow-wrap:anywhere;color:var(--muted)}.project-detail .technology-list{margin-bottom:0}.project-detail .project-purpose{grid-column:1/-1}.project-detail>a{margin-top:20px}
/* Telefonlarda bilgi kutusunu tek sütuna indirir. */
@media(max-width:600px){.project-detail{padding:18px}.project-detail dl{grid-template-columns:minmax(0,1fr)}}

/* Duyarlı picture öğeleri önceki kart ve kapak yerleşimini aynı ölçülerle korur. */
.responsive-picture{display:block;max-width:100%;min-width:0}.card>a>.responsive-picture{width:100%;height:150px;flex-shrink:0}.feature-art>.responsive-picture{width:100%;height:100%}.project-card>a>.responsive-picture{width:100%;height:220px}.cover>.responsive-picture{width:100%}.article .responsive-picture img{display:block;max-width:100%;height:auto}
/* Mobil proje kartında mevcut kırpma yüksekliğini korur. */
@media(max-width:700px){.project-card>a>.responsive-picture{height:180px}}

/* Öne çıkan picture içindeki satır tabanı boşluğunu kaldırıp eski görsel yüksekliğini korur. */
.feature-art>.responsive-picture img{display:block}
/* Mint düğmelerde üzerine gelindiğinde ve klavye odağında koyu yazıyı korur. */
.primary:hover,.primary:focus-visible{color:#102423;background:#b0e8d6}
/* Basılı düğmede de yazı ve zemin kontrastını korur. */
.primary:active{color:#102423;background:#83cdb4}
/* Seçili kategori etkileşimlerinde mint zemin üzerinde koyu yazıyı korur. */
.topic.selected:hover,.topic.selected:focus-visible{color:#102423;background:#b0e8d6;border-color:#b0e8d6}