/* {CC} 2026-09-03 */
/* custom.css - Matt'in dosyasi. Tema guncellemesinde ezilmez. */

/* Ana sayfa "About" ve "Success Stories" bolum basliklari (Matt,
   2026-09-04): "Products basligi gibi yap. Bas harfi buyuk, kalani
   kucuk harf ve ayni boyutta ve renkte olsunlar." Bu ikisi eskiden
   .section-label'di (kucuk, TUM BUYUK HARF, --accent-deep turuncu) -
   "Products" ise duz h2 (buyuk, --text koyu, yazildigi gibi). Metin
   zaten "About"/"Success Stories" olarak Baslik-Harfi yazilmisti, tek
   sorun uppercase donusumuydu. `.section-label` sitede baska yerlerde
   de kullanildigi icin (orn. "Ecosystem") o class DEGISTIRILMEDI -
   bu ikisine ayri bir `.section-title` sinifi h2 ile birebir ayni
   tipografiyle verildi. */
.section-title {
  display: block;
  font-family: var(--font-head);
  line-height: var(--lh-tight);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}

/* 2026-09-04 (Matt): "About ve Success Stories basliklari bold olmali,
   An independent.... satiri ise bold olmamali." Gercek `<h2>` etiketleri
   tarayici varsayilaniyla zaten bold (700) geliyordu, `.section-title`
   ise bir `<span>` oldugu icin bold ALMIYORDU - yukaridaki font-weight:700
   bunu duzeltti. About bolumundeki asil alt baslik ("An independent
   American...") h2 oldugu icin varsayilan bold'u KORUYORDU - Matt bunun
   BOLD OLMAMASINI istedi, sadece bu satira ozel font-weight:400 verildi. */
#about h2 { font-weight: 400; }

/* Become a Beta Tester formu - 5 haneli alanlar (TODO_01 madde 1/2) */
.form-field-narrow input.field-narrow {
  width: 100px;
  max-width: 100px;
}

/* Timeline basliklari tiklaninca eklentinin tekil cool_timeline
   sayfasina gidiyordu (tek satirlik, ise yaramayan bir sayfa) - Matt:
   "Bunu engellemek lazim" -> sonra "Yapilabiliyorsa ... geri getir ama
   basilinca blog'a degil, o urunun sayfasina gitsin". Urun-ozel 8
   kayitta tiklama GERI ACIK - href'leri functions.php'deki kucuk bir
   JS ile eklentinin tekil sayfasindan o urunun kendi canli sitesine
   cevriliyor (assets/timeline-links.js). MetroWo'nun kendi kayitlarinda
   (136 Engineering roots, 137 UME, 156 ITU, 138 Continued in the
   United States) gidecek bir urun sitesi olmadigi icin tiklama KAPALI
   kaliyor. */
#ctl-story-136 .story-link, #ctl-story-137 .story-link,
#ctl-story-156 .story-link, #ctl-story-138 .story-link {
  pointer-events: none !important;
  cursor: default !important;
}

/* Timeline rozet renkleri (Matt karari, 2026-09-04, ayni gun icinde
   iki kez duzeltildi): sirket-geneli/MetroWo'nun kendi isleri (136
   Engineering roots, 137 UME, 156 ITU, 138 Continued in the United
   States) hepsi MetroWo'nun --accent-deep rengi (#9B4808) - onceki
   "yesil = sirket-geneli" kurali TAMAMEN KALDIRILDI (Matt: "continued
   şn rengi de MW'nun rengi olmali" + "Engineering root'un rengi de").
   Urun-ozel kayitlar o urunun kendi accent-deep rengi - 157 (GE ilk
   prototip) yanlislikla eskiden yesil gruptaydi, GageEye mavisine
   tasindi. Cool Timeline (ucretsiz surum) rozet rengini post bazinda
   ayarlamiyor (Pro ozelligi), o yuzden her ogenin kendi
   #ctl-story-<ID> kimligi uzerinden override ediliyor. */
#ctl-story-136 .ctl-icon, #ctl-story-136 .ctl-title, #ctl-story-136 .ctl-arrow,
#ctl-story-137 .ctl-icon, #ctl-story-137 .ctl-title, #ctl-story-137 .ctl-arrow,
#ctl-story-156 .ctl-icon, #ctl-story-156 .ctl-title, #ctl-story-156 .ctl-arrow,
#ctl-story-138 .ctl-icon, #ctl-story-138 .ctl-title, #ctl-story-138 .ctl-arrow { background: #9B4808; border-color: #9B4808; }

#ctl-story-139 .ctl-icon, #ctl-story-139 .ctl-title, #ctl-story-139 .ctl-arrow,
#ctl-story-140 .ctl-icon, #ctl-story-140 .ctl-title, #ctl-story-140 .ctl-arrow { background: #08725D; border-color: #08725D; }

#ctl-story-141 .ctl-icon, #ctl-story-141 .ctl-title, #ctl-story-141 .ctl-arrow,
#ctl-story-157 .ctl-icon, #ctl-story-157 .ctl-title, #ctl-story-157 .ctl-arrow { background: #3B5C8A; border-color: #3B5C8A; }

#ctl-story-142 .ctl-icon, #ctl-story-142 .ctl-title, #ctl-story-142 .ctl-arrow,
#ctl-story-143 .ctl-icon, #ctl-story-143 .ctl-title, #ctl-story-143 .ctl-arrow { background: #5A4A9E; border-color: #5A4A9E; }

#ctl-story-144 .ctl-icon, #ctl-story-144 .ctl-title, #ctl-story-144 .ctl-arrow,
#ctl-story-145 .ctl-icon, #ctl-story-145 .ctl-title, #ctl-story-145 .ctl-arrow { background: #416181; border-color: #416181; }

/* 2026-09-04 (Matt duzeltmesi): ikonlar .ctl-icon dairesinde
   gorunmuyordu (cizgiyle kesisim noktasinda, cok kucuk/gizli) -
   bunun yerine urun-ozel kayitlarin baslik yazisinin ONUNE, kucuk bir
   rozet olarak eklendi (.ctl-title icindeki .story-link'in ::before'u).
   Sirket-geneli ve UME/ITU kayitlarinda (MetroWo'nun kendi rozeti yok,
   Bolum 5.1) ikon yok.
   2026-09-04 (Matt, ikinci duzeltme): "sitelerde ana logonun yanina
   koydugumuz resimleri degil de urun logolarini kullansak daha uygun
   olacak" - durum rozeti muhurleri (timeline-badge-*.svg) yerine her
   urunun kendi product-logo.png'si kullanildi (timeline-logo-*.png,
   header.php'deki product-logo.png ile ayni gorsel, MetroWo temasina
   kopyalandi). */
#ctl-story-139 .ctl-title .story-link::before,
#ctl-story-140 .ctl-title .story-link::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: -7px;
  background: url('assets/timeline-logo-gypsy.png') center/contain no-repeat;
}
#ctl-story-141 .ctl-title .story-link::before,
#ctl-story-157 .ctl-title .story-link::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: -7px;
  background: url('assets/timeline-logo-gageeye.png') center/contain no-repeat;
}
#ctl-story-142 .ctl-title .story-link::before,
#ctl-story-143 .ctl-title .story-link::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: -7px;
  background: url('assets/timeline-logo-autocalibrator.png') center/contain no-repeat;
}
#ctl-story-144 .ctl-title .story-link::before,
#ctl-story-145 .ctl-title .story-link::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: -7px;
  background: url('assets/timeline-logo-gagehand.png') center/contain no-repeat;
}

/* 2026-09-04 (Matt: "dikeyde bu blog'lari birbirlerine yakinlastiralim.
   Cok ayrik duruyorlar") - Cool Timeline varsayilani .ctl-story'ye
   50px margin-bottom veriyordu, kayitlar arasinda bosluk daralttildi. */
.ctl-timeline .ctl-story { margin-bottom: 20px; }

/* Products bolumundeki urun kartlari - durum rozetleri (Matt, 2026-09-04):
   "AC ve GH icin silik gorunusleri kaldirip ... sabit yap ama In
   Development gibi yazi yazacagimiza sitelerdeki ikon ve tooltip
   yazilarini buralara da aynen koyalim. Her bir kutu bu tooltip'li
   sekilleri icersin ama ufak olsunlar, heryeri kaplamasinlar. Kutularin
   sag ustunde dursunlar." AC/GH'deki .is-muted (silik+kesikli cerceve)
   kaldirildi (post_content, Bolum 10 log: DB_Changes.md), butun 4 kart
   artik dort sitenin kendi header'indaki .status-badge/.status-badge-tip
   mekanizmasinin ayni kopyasini (assets/timeline-badge-*.svg - Timeline
   artik logo kullandigi icin bu SVG'ler burada yeniden kullanildi)
   tasiyor.
   2026-09-04 (Matt, ek duzeltmeler): "Tooltip'lerin saga dogru cikmasi
   lazim ki yazilari kapatmasinlar" - tip'in ankraji right:0'dan left:0'a
   cevrildi (rozetin SOL kenarindan baslayip SAGA dogru aciliyor, artik
   baslik metninin ustune binmiyor).
   "Basliklari ikonlarla ayni ortalanmis halde koy ve fontlarini 2 punto
   daha buyuk" - rozet+h3 artik ayri (rozet mutlak sag-ust, baslik
   asagida) degil, TEK bir flex satirinda yan yana ve dikeyde ortali;
   h3 font-size +2pt.
   "Resimleri de 72x72 yap" - 96x96'dan 72x72'ye kucultuldu.
   "Kutularin iclerini de firma renkleri ile doldur" - her kartin
   arka plani o urunun kendi --panel rengi (Bolum 14.2 tablosu), link
   rengi o urunun --accent-deep'i oldu; post_content'e her karta ayirt
   edici siniflar eklendi (card-gypsy/card-gageeye/card-autocalibrator/
   card-gagehand). */
/* 2026-09-04 (Matt duzeltmesi, 2. tur): "AC kutusunun icindeki
   [rozet] ... alt satira kayip yazinin altindaki satirda solda
   duruyor". Onceki tasarim TUM kart iceriğini (rozet+h3+p+link) tek
   bir flex-wrap:wrap konteynerine koyup order ile diziyordu - "AutoCalibrator"
   nowrap oldugu icin genis bir "hipotetik" genislik istiyordu,
   flex-wrap algoritmasi bu genisligi rozetle AYNI SATIRA SIGDIRAMAYINCA
   rozeti bir alt satira atiyordu (shrink, wrap karari VERILDIKTEN
   SONRA uygulaniyor - kisa kartlarda sorun yokmus gibi gorunuyordu).
   Kalici cozum: rozet+h3 artik post_content'te ayri bir
   `.card-header` div'i icinde, KENDI flex-wrap:nowrap satirinda -
   bu satir hicbir zaman bolunmuyor, h3 gerekirse ellipsis ile
   kirpiliyor ama rozet hep basligin saginda kaliyor. */
/* 2026-09-04 (Matt duzeltmesi, 4. tur - HEM logo HEM durum rozetini
   ayni anda istedi): "Anlatamadim. Logolar yazinin solunda paralel,
   tooltip'li durum ikonlari kutunun sag ustunde, simdiki urun
   logolarinin durduklari yerde olacak. durum ikonlari 64x64, logolar
   72x72." Iki AYRI ikon: (1) urun LOGOSU (timeline-logo-*.png, 72x72)
   basligin SOLUNDA, h3 ile ayni satirda, normal akista - `.card-header`
   artik logo+h3 iceriyor; (2) durum ROZETI (timeline-badge-*.svg,
   tooltip'li, 64x64) kartin sag-ust IC kosesinde, mutlak konumlu -
   ONCEKI turdaki (3. tur) yerinde ama artik logo degil rozet.
   Rozet+h3 ARTIK AYNI SATIRDA DEGIL (rozet mutlak, ayri) - bu yuzden
   3. turdeki "genislik kirilganligi" sorunu burada da olusmuyor: h3
   normal sekilde sarabilir, logo hep solda sabit kaliyor. Rozetle
   CARPISMAMASI icin karta sag-ust kosede rozetin kapladigi kadar
   `padding-right` ayrildi (64px rozet + bosluk). */
/* {CC} 2026-09-08 GUNCELLEME: Matt'in yeni karari - TUM basliklar
   `.container-wide`nin (1440px) sol kenarina hizalanacak (ONCEKI
   karar - `.container`a/1180px'e hizalamaktı - artik GECERSIZ).
   Bu yuzden `.products-heading-align`in eski `max-width:var(--w-content)`
   kisitlamasi KALDIRILDI - artik "Products" h2'si de digger
   `.container-wide` basliklariyla (Ecosystem, Problems and Our
   Solutions to Them, vb.) DOGAL olarak ayni noktada baslar, ayrica
   bir hizalama sartina gerek yok. Sinif GERIYE DONUK UYUMLULUK icin
   (HTML'de hala var) bos birakildi, kaldirilmadi (Bolum 2). */
.products-heading-align { /* kasitli olarak bos - eski max-width/margin kaldirildi */ }
.product-cards .card { position: relative; padding-right: calc(48px + var(--sp-2)); }
.product-cards .card-header {
  display: flex;
  align-items: center;
  column-gap: var(--sp-2);
}
.product-cards .card-header .card-logo-img {
  display: block;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}
/* h3 nowrap+ellipsis: "AutoCalibrator" tek kelime (bosluksuz), dar
   kartlarda normal white-space wrap YAPAMIYOR (kelime icinde bolunmez)
   ve kutusunun disina tasip rozetin altina giriyordu - bu sefer bu
   tasma bir satir dususu YARATMIYOR (logo ayri sabit), sadece guvenli
   bir ellipsis kirpmasi. */
.product-cards .card-header h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-h3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Matt: "AC'nin kutusu da digerleri gibi kucculdugu icin sadece AC
   icin, kutusundaki AutoCalibrator yazisi kirpiliyor" - "AutoCalibrator"
   digger 3 urun adindan (Gypsy/GageEye/GageHand) belirgin sekilde daha
   uzun tek kelime, ayni kutu/font boyutunda SADECE bu kart kirpiliyordu.
   Sadece bu karta ozel, biraz daha kucuk font-size - diger 3 kart
   DEGISMEDI.
   NOT: rozet 48x48'e buyuyunce (asagida) GageHand da sinira girdi,
   ona da kucuk bir pay verildi. Onemli detay: text-overflow:ellipsis
   1px'lik bir tasmada bile "..." icin yer acmak amaciyla COK DAHA
   FAZLA karakteri kirpiyor (orn. "AutoCalibrator" 1px tastiginda
   "AutoCalibrat..." gibi gorunuyor) - o yuzden tam 0px degil, birkac
   px REZERV payi birakildi. */
.card-autocalibrator .card-header h3 { font-size: calc(var(--fs-h3) * 0.64); }
.card-gagehand .card-header h3 { font-size: calc(var(--fs-h3) * 0.92); }
.product-cards .card-status-badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: inline-block;
  cursor: help;
  z-index: 5;
}
/* Matt (2026-09-04, ek): "tooltip'li ikonlarin boylarini 32x32'ye
   dusurelim" - durum rozeti 64x64'ten 32x32'ye kucultuldu.
   Sonra: "Kosedeki ikonlari tekrar 48x48 yapmayi deneyelim. Olmazsa
   bu boyuta geri donecegiz" - deneme olarak 48x48. */
.card-status-badge-img { display: block; width: 48px; height: 48px; }
.card-status-badge-tip {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 400;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade) var(--ease);
  z-index: 20;
}
.card-status-badge-tip strong { display: block; margin-bottom: var(--sp-1); color: var(--accent-deep); }
.card-status-badge:hover .card-status-badge-tip,
.card-status-badge:focus .card-status-badge-tip,
.card-status-badge:focus-within .card-status-badge-tip { opacity: 1; }

.product-cards .card-gypsy { background: #9BE8D9; }
.product-cards .card-gypsy .card-link { color: #08725D; }
.product-cards .card-gageeye { background: #C0CEE7; }
.product-cards .card-gageeye .card-link { color: #3B5C8A; }
.product-cards .card-autocalibrator { background: #C5BCE9; }
.product-cards .card-autocalibrator .card-link { color: #5A4A9E; }
.product-cards .card-gagehand { background: #B1C2D2; }
.product-cards .card-gagehand .card-link { color: #416181; }

/* {CC} 2026-09-08 */
/* About sayfasi "Leadership" karti - fotograf yer tutucu + isim/unvan/
   quote/biyografi duzeni. Sadece iki kart var (kalici baska calisan yok),
   text-align:center basligi/fotografi ortalar, .leader-bio paragraflari
   okunabilirlik icin sola donuk kalir. */
.leader-card { text-align: center; }
.leader-card .leader-bio { text-align: left; }
.leader-photo-caption { font-size: var(--fs-small); color: var(--text-dim); margin: 0 0 var(--sp-4); }
.leader-role { color: var(--accent-deep); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-cap, 0.04em); font-size: var(--fs-small); margin-bottom: var(--sp-4); }
.leader-card blockquote { font-style: italic; color: var(--text-dim); border-left: 3px solid var(--line); padding-left: var(--sp-3); margin: 0 0 var(--sp-4); text-align: left; }

/* 2026-09-08 (Matt): Mert'in quote'u saga dayali, cizgisi de sagda olsun. */
.leader-card blockquote.quote-right { text-align: right; border-left: none; border-right: 3px solid var(--line); padding-left: 0; padding-right: var(--sp-3); }