/* ========================================================================== NEXT GEO — page stylesheet for the KNOWLEDGE-BASE PAIR TR 713 /bilgi-bankasi/ EN 25629 /en/information-bank/ One authored sheet for both; ng-page-apply.php --css-from copies it to information-bank.css so the pair cannot drift. Loads last: ng-foundation → ng-components → ng-mobile → ng-shared → THIS FILE so a rule here at equal specificity beats all four. ng-shared.css owns everything that is not specific to this page. Nothing in here is a candidate for ng-shared: the row index below is the only list of ARTICLES on the site, and the single-post template (a separate later pass) will want a different shape again. --------------------------------------------------------------------------- WHAT WAS ACTUALLY WRONG (measured post-JS with ng-page-check, before any change; screenshots /root/ng-shots/bilgi-bankasi-{1440,390}.png and /root/ng-shots/en-information-bank-{1440,390}.png) /bilgi-bankasi/ 1440: h=3363px words=370 h1:1 h2:1 h5:9 h6:3 390: h=5659px words=356 /en/information-bank/ 1440: h=3363px words=440 same outline 390: h=5765px words=426 both, both widths: 9 × "span @13.125px" untracked body copy under the 14px floor — the post meta row both, 390: 10 tap targets under 44px, three of them the card links (112×23 TR, 97×23 EN) Dead air measured 0% and centring measured clean, so by the numbers alone this page looked healthy. It was not. The whole content area was ONE theme widget — `neuros_blog_listing`, posts_per_page 9, grid — configured with show_date, show_cat and show_author all empty, and the five defects that actually mattered are only visible by reading the DOM and the screenshots: 1. NINE IDENTICAL LINK LABELS. "DEVAMINI OKU" ×9 / "READ MORE" ×9. This is the same finding the audit made across the site, and here it was also the tap-target failure. 2. NO DATES ANYWHERE, on a library holding posts from 2024, 2025 and 2026. Nothing told a visitor whether they were reading current work. 3. EXCERPTS CUT MID-WORD. The widget truncates the body on a character count: "…dijitalleşen hizmet yap", "harita ü", "e-commer", "cost and profit targ", "begins not physically, but through a map. If a st". Meanwhile twelve of the fourteen posts open with a one-sentence deck their own author wrote, and the widget threw every one of them away. 4. SIX OF FIFTEEN POSTS BEHIND A PAGINATION CLICK, which was also the page's only control. 5. NO CALL TO ACTION OF ANY KIND. The page ended on "1 · 2 · Next". Plus the full-viewport stock 3D-city theme banner (page_title_status was "default"), which also supplied the h1 — so the page had no authored heading of its own at all. --------------------------------------------------------------------------- WHAT THIS PAGE IS NOW, AND WHY IT DOES NOT LOOK LIKE THE OTHER HUBS /sektorler/, /urunler/ and /cozumler/ front 7–14 PRODUCTS. Products are peers, you compare them side by side, and a card grid is the right shape. An archive is not that. Its items are not peers — they are dated, they sit inside a subject, and their only useful comparison is "which one answers my question". So the index here is ROWS: a fixed left rail carrying the date and the topic, the title and the article's own deck in the measure, one arrow. A row also survives a topic group of two (or, in English, of one) without leaving an orphan column, which a three-up grid does not. Three organisations of the same fourteen articles, each doing a different job, and the page is short enough that all three are legible: · the masthead aside — five topics with counts, jump links (FIND) · section 25 — three reading paths by decision (START) · section 30 — the complete dated index (BROWSE) ONE IMAGE ON THE PAGE. Every post has a featured image and the old listing printed nine of them; thirteen of fifteen are generic stock illustrations uploaded with an EMPTY alt (checked in _wp_attachment_image_alt for all of them). They say nothing about a location-analytics article and they cost ~300px of card height each. The one that stays is the Global Top 100 logo map on the lead card, because it is the artefact its article is about — and it reuses the avif/webp/jpg trio the homepage credential bar already generated, so this page ships no new asset. NO FILTER. A CSS-only `:checked ~` filter was built first — the homepage hero's own idiom — and rejected: it puts six to twelve article links into display:none for a crawler, in exchange for a control that fourteen items grouped under five headings do not need. The aside index does the same job with anchors and hides nothing. ========================================================================== */ /* ========================================================================== 1. MASTHEAD ========================================================================== */ /* 57/43 rather than ng-shared's 58/42. The aside is a five-row index whose longest label is "Yer seçimi ve yatırım" plus a right-aligned count; at 42% of 1120 that label wrapped to two lines and the panel stopped reading as a table of contents. */ @media (min-width:960px){ .ng-v2 .ng-bbmh .ng-masthead__inner{ grid-template-columns:minmax(0,57fr) minmax(0,43fr); } } /* Held short of the lede's measure so the two do not read as one paragraph. */ .ng-v2 .ng-bbmh__note{ max-width:58ch; } /* ========================================================================== 2. TOPIC INDEX (masthead aside) The page's table of contents. SUNKEN surface: mist + hairline, holding chrome — the same role and the same reasoning as the solutions hub's router panel, because an untethered tint on the #FAFBFF ground reads as a smudge rather than a plate. No shadow: a recessed surface that also floats is a contradiction. ========================================================================== */ .ng-v2 .ng-bbidx{ padding:8px 20px 18px; background:var(--ng-surface-sunken); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); } @media (min-width:960px){ /* Pinned to the top of its track, not stretched: the copy column is taller and a stretched panel would leave mist under the last row. */ .ng-v2 .ng-bbidx{ align-self:start; margin-top:34px; } } @media (max-width:959px){ .ng-v2 .ng-bbidx{ margin-top:4px; } } .ng-v2 .ng-bbidx__label{ margin:14px 0 2px; } .ng-v2 .ng-bbidx__list{ list-style:none; margin:0; padding:0; } /* Defensive, and the solutions hub needed exactly this: Neuros ships a bare `ul > li{padding:0 0 0 1.875em}` at (0,0,2) for the fontello chevron that ng-components.css §10 suppresses. A 30px inset on a 43%-wide panel would be very visible; one line, no risk. */ .ng-v2 .ng-bbidx__list > li{ padding:0; margin:0; } /* The row is a link, and the count sits at the far end of it — a table of contents, not a menu. 44px min-height from the start rather than only at mobile: this is the aside's whole interaction and a 15px line box would otherwise land at ~34px on a touch tablet in the 768–959 band. */ .ng-v2 .ng-bbidx__link{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:6px 0; border-bottom:1px solid var(--ng-hairline); font-family:var(--ng-font-display); font-weight:600; font-size:15px; line-height:1.35; color:var(--ng-ink); text-decoration:none; } .ng-v2 .ng-bbidx__list > li:last-child .ng-bbidx__link{ border-bottom:0; } .ng-v2 .ng-bbidx__link:hover{ color:var(--ng-accent); } .ng-v2 .ng-bbidx__link:hover .ng-bbidx__n{ color:var(--ng-accent); } /* 14px, not the 12px a tracked label may use: this is a bare numeral, and letter-spacing on a single digit is meaningless, so it cannot take the tracked-label exception and falls under the reading floor instead. */ .ng-v2 .ng-bbidx__n{ flex:0 0 auto; font-family:var(--ng-font-label); font-weight:600; font-size:14px; line-height:1.2; color:var(--ng-muted); font-variant-numeric:tabular-nums; } .ng-v2 .ng-bbidx__note{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--ng-muted); /* 5.42:1 on mist */ } /* ========================================================================== 3. LEAD ARTICLE One raised card, image and copy side by side. It is a .ng-card--link, so the whole card is the anchor and its accessible name is the article title — the same fix as the index rows below. ========================================================================== */ /* .ng-card is a flex column in ng-shared §6; this is the one card on the page that is two columns, so the display is restated rather than fought. */ .ng-v2 .ng-bblead__card{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding:20px; } @media (min-width:860px){ .ng-v2 .ng-bblead__card{ grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:28px; padding:22px; align-items:center; } } /* The media keeps its own radius and its own aspect ratio rather than being bled to the card edge. Full-bleed was built first: with align-self:stretch the 880×495 logo map gets cropped top and bottom by object-fit:cover, and the crop eats the "Global Top 100 Geospatial Companies 2026" title band printed across the top of it — i.e. exactly the information that makes the image worth showing. An inset plate at the source ratio cannot crop. */ .ng-v2 .ng-bblead__media{ display:block; overflow:hidden; border-radius:var(--ng-radius-sm); background:var(--ng-surface-sunken); /* shows only while the file loads */ aspect-ratio:880 / 495; } .ng-v2 .ng-bblead__media picture{ display:block; height:100%; } .ng-v2 .ng-bblead__img{ display:block; width:100%; height:100%; object-fit:cover; } .ng-v2 .ng-bblead__body{ display:flex; flex-direction:column; min-width:0; } /* .ng-eyebrow is authored on a here so the date can be a