/* shared.css — Boğaziçi ArGe alt sayfaları (sektörler / uzmanlıklar)
   Kaynak: index.html'in <style> bloğu. Token'lar ve paylaşılan bileşenler
   (header, mega menü, çekmece, footer, kart/eyebrow/arrow/placeholder) BİREBİR
   buradan kopyalandı — iki dosya arasında sürüklenmesin diye tokenlar üstte,
   sayfa tipine özel bloklar (topic-hero, stat-band, quote-band, related-strip,
   breadcrumb, hub-grid) altta, ayrı başlık altında duruyor.
   index.html'in kendi <style> bloğuna DOKUNULMADI — ana sayfa hâlâ kendi
   kopyasını kullanıyor; bu, projenin index.html/inde32323x.html arasında
   zaten var olan çoğaltma deseniyle tutarlı. */

:root {
  --ink: #1b1b19;
  --blue: #051c2c;
  --blue-2: #123754;
  --electric: #2251ff;
  --electric-hover: #1e32e6;
  --light-blue: #e6ecff;
  --line: #ebebf6;
  --muted: #7b7b78;
  --red: #c23a3a;
  --font-ui: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-editorial: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-wordmark: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --brand-navy: #002b5c;
  --placeholder: #4b4e53;
  --placeholder-line: #73777e;

  /* Layout tokens — ana sayfayla aynı değerler, tek yerden değişsin diye */
  --maxw: 1800px;
  --gutter: clamp(12px, 1vw, 18px);
  --side: max(var(--gutter), (100% - var(--maxw)) / 2);
  --header-h: 64px;
  --block-space: clamp(52px, 7vw, 132px);

  --fs-display: clamp(2.1rem, 1.15rem + 3.9vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  --fs-lead: clamp(1.05rem, .95rem + .7vw, 1.6rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.08rem);
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
.site-header :focus-visible, .topic-hero :focus-visible, .help :focus-visible,
.quote-band :focus-visible, .app-promo :focus-visible, .cta-band :focus-visible,
footer :focus-visible, .menu-drawer :focus-visible { outline-color: #7fa0ff; }
.serif { font-family: var(--font-editorial); }
.eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.arrow { display: inline-grid; width: 35px; height: 35px; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 20px; line-height: 1; transition: transform 120ms linear, background 120ms linear; }

/* Image slot: the grey box is the fallback, the <img> sits on top of it.
   Drop a file in /images (or point src at a URL) and it takes over; if the
   file is missing the script removes the broken <img> and the box stays. */
.placeholder { position: relative; display: grid; width: 100%; overflow: hidden; isolation: isolate; place-items: center; color: #e8e9eb; background: var(--placeholder); border: 1px solid #666b71; }
.placeholder::before, .placeholder::after { position: absolute; width: 160%; height: 1px; content: ''; background: var(--placeholder-line); transform: rotate(28deg); }
.placeholder::after { transform: rotate(-28deg); }
.placeholder span { z-index: 1; padding: 8px 12px; color: #f6f7f8; background: rgba(20,22,25,.72); border: 1px solid #797d83; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.placeholder img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.placeholder.has-image { background: none; border: 0; }
.placeholder.has-image::before, .placeholder.has-image::after, .placeholder.has-image span { display: none; }
/* Photo frames (hero / hub-card / app-visual) hold real, non-cropped source
   photos whose aspect ratio doesn't always match the frame — "cover" was
   zooming in and cutting off large parts of the image. "contain" always
   shows the whole picture inside its frame. */
.placeholder.picture img { object-fit: contain; }

/* Header */
.site-header { position: sticky; z-index: 20; top: 0; width: 100%; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.nav { position: relative; display: flex; max-width: calc(var(--maxw) + 2 * var(--gutter)); height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter); align-items: center; gap: clamp(10px, 1.5vw, 18px); }
.menu-button { display: inline-grid; width: 44px; height: 44px; flex: none; margin-left: -10px; padding: 5px; place-items: center; border: 0; color: var(--blue); background: none; cursor: pointer; }
.menu-button i, .menu-button i::before, .menu-button i::after { display: block; width: 20px; height: 1px; background: currentColor; content: ''; }
.menu-button i { position: relative; }
.menu-button i::before { position: absolute; top: -6px; }
.menu-button i::after { position: absolute; top: 6px; }
/* Wordmark — Didone editorial lockup (Bodoni Moda), two lines held at the
   exact same size/weight/tracking so it reads as one typeset unit, not a
   name over a caption. Navy is pinned only in the white header; on the
   dark footer it inherits the footer's own light text color instead. */
.wordmark { flex: none; display: inline-flex; flex-direction: column; gap: 1px; line-height: 1; }
.wordmark-line { display: block; font-family: var(--font-wordmark); font-optical-sizing: auto; font-weight: 700; font-size: clamp(16px, 1rem + .4vw, 19px); line-height: 1.28; letter-spacing: .045em; text-transform: uppercase; }
.site-header .wordmark-line { color: var(--brand-navy); }
.nav-links { display: flex; align-items: stretch; height: 100%; gap: clamp(12px, 1.8vw, 30px); margin: 0 0 0 auto; font-size: 14px; }
.nav-links a, .nav-trigger { display: inline-flex; height: 100%; padding: 0; align-items: center; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-family: inherit; font-size: inherit; white-space: nowrap; }
.nav-trigger::after, .nav-links a::after { margin-left: 7px; content: '⌄'; font-size: 15px; }
.nav-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-links .plain::after { content: ''; }
/* "Süreç" — müşteri yolculuğunun tek giriş noktası, üst navda diğer
   linklerden biraz daha belirgin ama BUTON değil (bkz. kullanıcı isteği:
   "reklam gibi görünmesin, parlak buton kullanma"). Tek bir ok karakteri
   hem sürekli ince bir aksan (hover'da 3px kayar) hem de her sayfa
   yüklemesinde başlayıp 3 saniyede bir tekrar eden bir "nudge"
   animasyonunun hedefi — aynı öge iki amaca da hizmet ediyor, ayrı bir
   dekor eklemek yerine (bkz. shared.js sondaki Süreç yumuşak yönlendirme
   IIFE'si, .is-nudging'i sayfa yüklendiğinde bir kez ekler; döngü ondan
   sonra tamamen CSS tarafında, JS interval'i yok). */
.nav-surec { gap: 3px; }
.nav-surec-arrow { display: inline-block; margin-left: 3px; transition: transform 180ms ease; }
.nav-surec:focus-visible .nav-surec-arrow { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .nav-surec:hover .nav-surec-arrow { transform: translateX(3px); }
}
.nav-surec-arrow.is-nudging { animation: nav-surec-nudge-loop 3s ease-in-out infinite; }
@keyframes nav-surec-nudge-loop {
  0%, 10%, 100% { transform: translateX(0); }
  5% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-surec-arrow, .nav-surec-arrow.is-nudging { animation: none; transition: none; }
}
.nav-actions { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); margin-left: clamp(10px, 1.4vw, 18px); font-size: 14px; white-space: nowrap; }
.search { display: inline-grid; width: 40px; height: 40px; place-items: center; margin-right: -8px; padding: 0; border: 0; color: var(--blue); background: transparent; cursor: pointer; font-size: 22px; line-height: 1; }
.mega-menu, .search-panel, .auth-panel { position: absolute; z-index: 25; top: calc(var(--header-h) - 1px); right: var(--gutter); left: var(--gutter); max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; padding: 24px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--electric); box-shadow: 0 8px 16px -1px rgba(5,28,44,.20), 0 0 1px rgba(5,28,44,.10); }
.mega-menu[hidden], .search-panel[hidden], .auth-panel[hidden] { display: none; }
.mega-menu, .search-panel, .auth-panel { opacity: 0; transform: translateY(-7px); transition: opacity 260ms ease, transform 260ms ease; }
.mega-menu.is-open, .search-panel.is-open, .auth-panel.is-open { opacity: 1; transform: none; transition-duration: 80ms; }
.nav-trigger::after { display: inline-block; transition: transform 140ms ease; }
.mega-menu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 360px); gap: clamp(24px, 3vw, 48px); }
.menu-label { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.mega-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
.mega-menu a { display: block; min-height: 44px; padding: 10px 0; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 15px; }
.menu-feature { padding: 24px; color: #fff; background: var(--blue); }
.menu-feature h3 { margin: 4px 0 10px; font: var(--fs-h3)/1.15 var(--font-editorial); }
.menu-feature p { margin: 0 0 20px; color: #dbe5ed; font-size: 14px; line-height: 1.45; }
.menu-feature a { display: inline; min-height: 0; padding: 0; color: #fff; border: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.search-panel { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.search-panel input { min-width: 0; flex: 1 1 220px; height: 46px; padding: 10px 14px; border: 1px solid var(--muted); border-radius: 2px; font-family: var(--font-ui); font-size: 16px; outline-color: var(--electric); }
.search-panel button { flex: 0 0 auto; min-width: 112px; height: 46px; padding: 0 18px; border: 0; border-radius: 4px; color: #fff; background: var(--electric); cursor: pointer; font-weight: 600; }

/* Auth popover (Giriş / Kayıt Ol / hesap menüsü) — search-panel'in konum ve
   geçiş kurallarını (yukarıda .auth-panel eklenmiş hâliyle) miras alır,
   yeni bir eğri icat etmez. */
.auth-trigger { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: inherit; white-space: nowrap; }
.auth-avatar { display: inline-grid; width: 26px; height: 26px; flex: none; place-items: center; border-radius: 50%; background: var(--electric); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.auth-panel { width: min(360px, calc(100vw - 2 * var(--gutter))); right: var(--gutter); left: auto; padding: 22px; }
.auth-tabs[hidden] { display: none; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.auth-tab { flex: 1; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 14px; }
.auth-tab.is-active { color: var(--ink); border-bottom-color: var(--electric); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form[hidden] { display: none; }
.auth-form input { height: 46px; padding: 0 14px; border: 1px solid var(--muted); border-radius: 2px; font-family: var(--font-ui); font-size: 15px; outline-color: var(--electric); }
.auth-form button[type="submit"] { height: 46px; border: 0; border-radius: 4px; color: #fff; background: var(--electric); cursor: pointer; font-weight: 600; }
.auth-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.auth-error { margin: 4px 0 0; color: var(--red); font-size: 12px; line-height: 1.4; }
.auth-verify-copy { margin: 0 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.auth-verify-resend { padding: 0; border: 0; background: none; color: var(--electric); cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; }
.account-menu[hidden] { display: none; }
.account-greeting { margin: 0 0 14px; font-weight: 600; }
.account-link { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.account-logout { display: block; width: 100%; margin-top: 4px; padding: 12px 0 0; border: 0; background: none; color: var(--electric); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; }

/* Komut menüsü (Ctrl+K / ⌘K) — kod tabanındaki ilk modal/diyalog kalıbı;
   odak tuzağı çekmecenin (.menu-drawer) Tab yakalama mantığından uyarlandı. */
.cmdk-trigger { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.cmdk-scrim { position: fixed; z-index: 49; inset: 0; opacity: 0; background: rgba(3,12,22,.55); transition: opacity 160ms linear; pointer-events: none; }
.cmdk-scrim.open { opacity: 1; pointer-events: auto; }
.cmdk-overlay[hidden] { display: none; }
/* Komut paleti klavye kısayoluyla (Ctrl+K) sık açılır — kayma/ölçek yok,
   yalnızca hızlı bir opaklık geçişi; review-animations'ın "klavyeyle
   tetiklenen/komut paleti geçişi = animasyon yok" kuralına en yakın uyum. */
.cmdk-overlay { position: fixed; z-index: 50; top: 12vh; left: 50%; display: flex; flex-direction: column; width: min(640px, calc(100vw - 32px)); max-height: 70vh; overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 20px 60px -10px rgba(5,28,44,.35), 0 0 1px rgba(5,28,44,.2); opacity: 0; transform: translate(-50%, 0); transition: opacity 90ms linear; }
.cmdk-overlay.is-open { opacity: 1; }
.cmdk-input { height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: 16px; outline: 0; }
.cmdk-list { margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.cmdk-group-label { margin: 14px 12px 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cmdk-group-label:first-child { margin-top: 6px; }
.cmdk-item { display: block; width: 100%; padding: 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; text-align: left; font-size: 14px; font-family: inherit; }
.cmdk-item.is-active { background: var(--light-blue); color: var(--electric); }
.cmdk-empty { margin: 0; padding: 24px 20px; color: var(--muted); font-size: 14px; text-align: center; }
.panel-empty { margin: 0 0 clamp(28px, 3vw, 40px); color: var(--muted); font-size: 15px; }

/* Drawer */
.drawer-scrim { position: fixed; z-index: 29; inset: 0; opacity: 0; background: rgba(3,12,22,.55); transition: opacity 160ms linear; pointer-events: none; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.menu-drawer { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(430px, 86vw); padding: max(24px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; color: #fff; background: var(--blue); box-shadow: 10px 0 30px rgba(0,0,0,.24); transform: translateX(-102%); transition: transform 180ms ease; -webkit-overflow-scrolling: touch; }
.menu-drawer.open { transform: translateX(0); }
.drawer-close { display: grid; width: 44px; height: 44px; place-items: center; margin: 0 -10px 0 auto; padding: 0; border: 0; color: #fff; background: none; font-size: 30px; line-height: 1; cursor: pointer; }
.drawer-title { margin: clamp(24px, 7vw, 56px) 0 24px; font: clamp(1.75rem, 1.2rem + 2.4vw, 2.4rem)/1.05 var(--font-editorial); }
.drawer-link { display: block; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.25); font-size: 17px; }

/* Content sections (paylaşılan) */
.section { padding: var(--block-space) var(--side); }
.section-heading { max-width: min(100%, 900px); margin: 0 auto clamp(34px, 4.6vw, 58px); text-align: center; }
.section-heading h2 { margin: 0 0 15px; font: var(--fs-display)/1.03 var(--font-editorial); letter-spacing: -.035em; }
.section-heading p { margin: 0; font: var(--fs-lead)/1.3 var(--font-editorial); }
.text-link { display: inline-block; padding: 10px 0; color: var(--electric); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.help { color: #fff; background: var(--blue); }
.help .section-heading { max-width: 700px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 24px); max-width: var(--maxw); margin-inline: auto; }
.cards.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Uygulama kartı — görselsiz, tıklanabilir "punchline" metin bloğu (2026-09-12).
   Önceki .service-card + resim yerine geçti; kart artık <a> olduğu için
   tamamı tıklanabilir ve #iletisim'e (sayfa sonu CTA) atlıyor. */
.app-card { display: block; padding: clamp(22px, 2.6vw, 30px); border: 1px solid rgba(255,255,255,.2); border-radius: 2px; transition: border-color 120ms linear, background 120ms linear; }
.app-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; font: var(--fs-h3)/1.1 var(--font-editorial); }
.app-card p { max-width: min(100%, 42ch); margin: 0; color: #e1e8f5; line-height: 1.45; }
.help .text-link, .topic-hero .text-link, .quote-band .text-link, .app-promo .text-link, .cta-band .text-link { color: #8fb0ff; }
.app-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(56px, 7vw, 88px) var(--side); color: #fff; background: var(--blue); }
.app-promo h2 { max-width: min(100%, 22ch); margin: 0 0 20px; font: var(--fs-h2)/1.02 var(--font-editorial); letter-spacing: -.028em; }
.app-promo p { max-width: min(100%, 54ch); margin: 0 0 25px; color: #dae6fc; }
/* Konu detay sayfalarının CTA'sı — .app-promo'nun görselli hâlinden AYRI bir
   sınıf: .app-promo'yu hub sayfaları (sektorler/index.html vb.) da kullanıyor
   ve o sayfalara dokunulmuyor. Tek görsel kuralı (2026-09-12) yalnızca bu
   sınıfa uygulanıyor: baştan tek kolon, resim yok. */
.cta-band { padding: clamp(56px, 7vw, 88px) var(--side); color: #fff; background: var(--blue); text-align: center; }
.cta-band h2 { max-width: 700px; margin: 0 auto 20px; font: var(--fs-h2)/1.02 var(--font-editorial); letter-spacing: -.028em; }
.cta-band p { max-width: 620px; margin: 0 auto 25px; color: #dae6fc; }
.cta-band .store-buttons { justify-content: center; }
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store { padding: 11px 16px; border: 0; border-radius: 4px; color: var(--blue); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
footer { padding: clamp(48px, 6vw, 64px) var(--side) max(24px, env(safe-area-inset-bottom)); color: #d4d8e0; background: var(--blue); }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: clamp(24px, 3vw, 30px); padding-bottom: 40px; }
.footer-grid h3 { margin: 0 0 14px; color: #fff; font: 21px var(--font-editorial); }
.footer-grid a { display: block; margin: 4px 0; padding: 8px 0; font-size: 13px; }
.footer-intro { max-width: min(100%, 42ch); font-size: 13px; line-height: 1.5; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.25); font-size: 11px; }
.toast { position: fixed; z-index: 40; right: clamp(12px, 4vw, 24px); bottom: max(clamp(12px, 4vw, 24px), env(safe-area-inset-bottom)); left: auto; max-width: min(420px, calc(100vw - 24px)); padding: 14px 18px; color: #fff; background: #102b60; box-shadow: 0 6px 25px rgba(0,0,0,.25); transform: translateY(160px); transition: transform .25s ease; }
.toast.show { transform: translateY(0); }

/* Süreç yumuşak yönlendirme balonu — .toast'tan FARKLI bir bileşen,
   kasıtlı: .toast 2.8sn'de kendiliğinden kayboluyor (bkz. shared.js
   showToast), bu ise tıklanabilir bir CTA taşıyor, o kadar kısa sürede
   kaybolursa kullanıcı tıklayamadan kaçırır. Kullanıcı kapatana kadar
   açık kalır (× ile), oturum başına bir kez gösterilir (bkz. shared.js
   sondaki IIFE). Sade/sakin: nötr beyaz kart, tek ince kenarlık, marka
   vurgu rengi yalnızca CTA metninde — "reklam gibi" görünmesin diye. */
.surec-nudge { position: fixed; z-index: 40; left: clamp(12px, 4vw, 24px); right: clamp(12px, 4vw, 24px); bottom: max(clamp(12px, 4vw, 24px), env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto 0 0; padding: 18px 40px 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 10px 30px rgba(20, 20, 40, .12); opacity: 0; transform: translateY(14px); transition: opacity 280ms ease, transform 280ms ease; pointer-events: none; }
.surec-nudge.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.surec-nudge[hidden] { display: none; }
.surec-nudge-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.surec-nudge-close:hover { color: var(--ink); background: var(--line); }
.surec-nudge-text { margin: 0 0 12px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.surec-nudge-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); text-decoration: none; font-size: 13px; font-weight: 600; transform: translateY(0); transition: transform 180ms ease, background 180ms ease; }
.surec-nudge-cta:hover { background: var(--electric); transform: translateY(-1px); }
.surec-nudge-cta-arrow { display: inline-block; transition: transform 180ms ease; }
.surec-nudge-cta:hover .surec-nudge-cta-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .surec-nudge { transition: opacity 120ms linear; }
  .surec-nudge-cta, .surec-nudge-cta-arrow { transition: none; }
}
@media (max-width: 520px) {
  .surec-nudge { max-width: none; }
}

/* ================= Konu sayfası — YENİ bloklar ================= */

/* Kırıntı (breadcrumb) — koyu zeminde soluk, açık zeminde muted */
.crumb { margin: 0 0 16px; font-size: 12px; color: #9fb2d6; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: #fff; }
.crumb span[aria-hidden] { margin: 0 6px; opacity: .6; }

/* Konu hero — .careers ile aynı 2 kolonlu iskelet, metin+görsel */
.topic-hero { display: grid; grid-template-columns: 1.05fr .95fr; color: #fff; background: var(--blue); }
.topic-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 84px) var(--side) clamp(48px, 7vw, 84px) var(--side); }
.topic-hero-copy h1 { max-width: 20ch; margin: 0 0 20px; font: var(--fs-display)/1.03 var(--font-editorial); letter-spacing: -.03em; }
.topic-hero-copy p.lead { max-width: min(100%, 54ch); margin: 0 0 28px; font: var(--fs-lead)/1.4 var(--font-editorial); color: #dbe5ed; }
.topic-hero-visual { min-height: clamp(260px, 32vw, 460px); }
.topic-hero-visual .placeholder { height: 100%; }

/* İstatistik şeridi */
.stat-band { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); justify-content: center; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side); }
.stat-tile { flex: 1 1 220px; max-width: 320px; text-align: center; }
.stat-tile .num { display: block; margin-bottom: 8px; font: 400 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--font-editorial); color: var(--blue); }
.stat-tile p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.stat-note { max-width: 640px; margin: clamp(28px, 3vw, 40px) auto 0; padding: 0 var(--side); color: var(--muted); font-size: 12px; text-align: center; line-height: 1.5; }

.applications { background: var(--blue); }

/* Temsili senaryo / alıntı bandı */
/* Tek görsel kuralı (2026-09-12): quote-visual kaldırıldı, tek kolon metin bloğu kaldı. */
.quote-band { padding: var(--block-space) var(--side); color: #fff; background: var(--blue-2); }
.quote-band .quote-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-band blockquote { margin: 0 0 18px; font: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem)/1.32 var(--font-editorial); }

/* İlgili {kategori} şeridi */
.related-strip { max-width: var(--maxw); margin: 0 auto; padding: var(--block-space) var(--side); }
.related-strip h2 { margin: 0 0 26px; font: var(--fs-h2)/1.05 var(--font-editorial); letter-spacing: -.02em; }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
.related-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 16px 0; border-top: 1px solid var(--line); font: clamp(1rem, .95rem + .3vw, 1.1rem)/1.2 var(--font-editorial); transition: color 120ms linear, border-color 120ms linear; }

/* Hub sayfaları (Sektörler / Uzmanlıklar landing) */
.hub-hero { padding: clamp(64px, 9vw, 120px) var(--side) clamp(48px, 6vw, 72px); color: #fff; background: var(--blue); }
.hub-hero h1 { max-width: 16ch; margin: 0 0 20px; font: var(--fs-display)/1.03 var(--font-editorial); letter-spacing: -.03em; }
.hub-hero p { max-width: min(100%, 60ch); margin: 0; font: var(--fs-lead)/1.4 var(--font-editorial); color: #dbe5ed; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 28px); max-width: var(--maxw); margin: 0 auto; padding: var(--block-space) var(--side); }
.hub-card { display: flex; flex-direction: column; }
.hub-card .picture { aspect-ratio: 16 / 9; }
.hub-card h3 { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font: var(--fs-h3)/1.1 var(--font-editorial); color: var(--blue); }
.hub-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.hub-card .arrow { color: var(--blue); }

/* Panel (panelim.html) — giriş yapılmadan önce kilitli kart, giriş sonrası
   sol menülü uygulama kabuğu. Araçlar (.panel-nav-item / .panel-pane) sabit
   bir liste; gerçek araçlar hazır oldukça bu örnekler değiştirilecek. */
.panel-section { padding-top: clamp(32px, 4vw, 56px); }
/* .panel-locked-actions: artık yalnızca Ödeme'nin başarı ekranındaki buton
   satırı için (bkz. panelim.html #payment-success) — asıl "girişe kilitli"
   kart (.panel-locked/.panel-locked-card) kaldırıldı: adım 1-5 artık girişsiz
   erişilebilir, panel.js'teki renderPanel bkz. */
.panel-locked-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.panel-dashboard[hidden] { display: none; }
.panel-dashboard { display: flex; align-items: stretch; max-width: var(--maxw); margin: 0 auto; border: 1px solid var(--line); }
.panel-sidebar[hidden] { display: none; }
.panel-sidebar { display: flex; flex: none; flex-direction: column; justify-content: space-between; width: 250px; padding: 26px 18px; color: #fff; background: var(--blue); }
.panel-nav { display: flex; flex-direction: column; gap: 2px; }
.panel-nav-item { padding: 12px 12px; border: 0; border-radius: 4px; background: none; color: #c9d4e6; cursor: pointer; text-align: left; font-family: inherit; font-size: 14px; font-weight: 500; }
.panel-nav-item.is-active { color: #fff; background: rgba(255,255,255,.12); }
/* Genel Bakış alt dalı — sol menüdeki 7 aşama, panel-stepper (üstteki chevron
   şerit) ile AYNI adım durumunu (is-done/is-current) gösterir; ikisi de
   panel.js'teki tek bir renderStepper() tarafından güncelleniyor. */
.panel-nav-group { display: flex; flex-direction: column; }
.panel-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; padding: 0 0 0 14px; list-style: none; }
.panel-nav-subitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; background: none; color: #7e93bd; cursor: pointer; text-align: left; font-family: inherit; font-size: 12.5px; }
.panel-nav-subitem::before { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ''; opacity: .5; }
.panel-nav-subitem.is-done { color: #c9d4e6; }
.panel-nav-subitem.is-done::before { background: var(--electric); opacity: 1; }
.panel-nav-subitem.is-current { color: #fff; background: rgba(255,255,255,.12); font-weight: 600; }
.panel-nav-subitem.is-current::before { background: #fff; opacity: 1; }
.panel-sidebar-account { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.panel-nav-newproject { margin: 2px 0 6px 14px; padding: 6px 10px; border: 1px dashed rgba(255,255,255,.32); border-radius: 4px; background: none; color: #8fa0c2; cursor: pointer; text-align: left; font-family: inherit; font-size: 12px; font-weight: 600; }
/* Admin Paneli > Tübitak/Kosgeb alt dalları (T01.. / K01..) — panel-nav-subitem
   ile AYNI görünüm ama BİLEREK ayrı sınıf: panel.js'teki navSubItems
   dashboard.querySelectorAll('.panel-nav-subitem') tüm panelde tarayıp
   data-substep'i parseInt ediyor — "T01"/"K01" gibi bir değer NaN üretip o
   mantığı bozardı (bkz. .stage-step'teki aynı gerekçe). */
.panel-nav-adminsubitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; background: none; color: #7e93bd; cursor: pointer; text-align: left; font-family: inherit; font-size: 12.5px; }
.panel-nav-adminsubitem::before { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ''; opacity: .5; }
.panel-nav-adminsubitem.is-current { color: #fff; background: rgba(255,255,255,.12); font-weight: 600; }
.panel-nav-adminsubitem.is-current::before { opacity: 1; }
.panel-nav-admin { margin-top: 8px; color: #ffb454; }

/* Projelerim (kayıtlı kullanıcı) — hafif bir proje listesi: her proje kendi
   aşama numarasını hatırlar, ancak profil/bütçe/uygunluk verisi şimdilik
   projeler arasında paylaşılıyor (bkz. panel.js yorumu). */
.projects-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(28px, 3vw, 40px); }
.project-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.project-card-name { color: var(--ink); font-weight: 600; }
.project-card-meta { color: var(--muted); font-size: 12px; }
.project-card-open { flex: none; height: 38px; padding: 0 16px; border: 1px solid var(--electric); border-radius: 4px; background: none; color: var(--electric); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; }

/* Admin Paneli — mock kullanıcı listesi (demo veri, bkz. panel.js). */
.admin-user-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--line); }
.admin-user-row { display: grid; grid-template-columns: 22px minmax(0, 1.1fr) minmax(0, 0.8fr) 90px 110px 110px 100px 24px; gap: 12px; align-items: center; padding: 12px 16px; background: #fff; }
.admin-user-row.is-header { background: #fbfbfd; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.admin-user-row.is-selected { background: var(--light-blue); }
.admin-user-name { color: var(--ink); font-weight: 600; }
.admin-user-email { color: var(--muted); font-size: 12px; }
.admin-user-checkbox { width: 15px; height: 15px; accent-color: var(--electric); cursor: pointer; }
/* Aşama/Paket/Kullanıcı/Firma/Proje başlıkları — tıklayınca o sütuna göre
   artan/azalan sıralar (bkz. panel.js renderAdminUsersTable/adminSortField);
   asıl veri her zaman GET /api/admin/users'tan gelir, sıralama yalnızca
   istemcide zaten çekilmiş listeyi yeniden diziyor, yeni bir istek atmıyor. */
.admin-sort-btn { cursor: pointer; -webkit-user-select: none; user-select: none; }
.admin-sort-btn:hover { color: var(--electric); }
/* Satırın sonundaki ▸/▾ — PATCH /me/progress ile senkronize edilen firma
   profili/bütçe/uygunluk anlık görüntüsünü satırın altında açar/kapatır
   (bkz. panel.js buildAdminUserDetail). Yeni bir sayfa/route AÇMIYOR,
   admin-form-fields ile aynı görsel dili tekrar kullanıyor. */
.admin-user-expand-btn { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; }
.admin-user-expand-btn:hover, .admin-user-expand-btn.is-open { border-color: var(--electric); color: var(--electric); }
.admin-user-detail { display: flex; flex-wrap: wrap; gap: 24px; padding: 14px 16px 16px 52px; background: #fbfbfd; border-top: 1px solid var(--line); }
.admin-user-detail-section { flex: 1 1 220px; min-width: 0; }
.admin-user-detail .panel-empty { margin: 0; }
/* Admin Paneli altındaki Tübitak/Kosgeb başlıkları — /api/admin/forms'tan
   gelen gerçek başvuru kayıtlarını listeler (bkz. panel.js renderAdminForms),
   admin-user-list ile aynı görsel dil ama son kolon (form alanları) daha
   geniş olduğu için ayrı bir grid tanımı. */
.admin-form-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--line); }
.admin-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px minmax(0, 1.6fr); gap: 14px; align-items: start; padding: 12px 16px; background: #fff; }
.admin-form-row.is-header { background: #fbfbfd; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.admin-form-applicant { color: var(--ink); font-weight: 600; }
.admin-form-email { color: var(--muted); font-size: 12px; }
.admin-form-fields { margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink); line-height: 1.5; }
.admin-form-fields b { color: var(--muted); font-weight: 600; }
/* Admin Paneli > Tübitak/Kosgeb alt programları (T01.. / K01..) — o programın
   VARSAYILAN (genel/şablon) proje akışı; kullanıcıya özel gerçek veri değil,
   ekip için referans bir kontrol listesi (bkz. panel.js PROGRAM_FLOWS). */
.admin-flow-list { display: flex; flex-direction: column; gap: 1px; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; list-style: none; counter-reset: admin-flow; border: 1px solid var(--line); border-radius: 4px; background: var(--line); }
.admin-flow-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; color: var(--ink); font-size: 14px; }
.admin-flow-list li::before { counter-increment: admin-flow; content: counter(admin-flow); flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
.panel-sidebar-account p { margin: 0 0 4px; color: #fff; font-size: 13px; font-weight: 600; }
.panel-logout { padding: 0; border: 0; background: none; color: #8fb0ff; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; }

.panel-content { flex: 1; min-width: 0; padding: clamp(24px, 3vw, 40px); }
.panel-pane[hidden] { display: none; }
.panel-topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.panel-topbar h1 { margin: 0 0 8px; font: var(--fs-h2)/1.05 var(--font-editorial); letter-spacing: -.02em; }
.panel-topbar p { margin: 0; max-width: 54ch; color: var(--muted); font-size: 14px; }
.panel-action { flex: none; height: 44px; padding: 0 20px; border: 0; border-radius: 4px; color: #fff; background: var(--electric); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; }
.panel-action-ghost { color: var(--muted); background: none; border: 1px solid var(--line); }
/* Başlık satırındaki sağ taraf birden fazla buton taşıyabiliyor artık
   (mevcut aksiyon + üstteki İleri, bkz. .panel-nextbar-top) — .panel-topbar
   hâlâ tek bir flex item olarak görüyor bunu, iç hizalama burada. */
.panel-topbar-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 12px; }
.panel-section-label { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
/* Süreç aşama göstergesi (panelim.html Genel Bakış, başlığın ÜSTÜNDE) —
   kullanıcının 7 aşamalı başvuru sürecinde hangi noktada olduğunu gösterir ve
   tıklayarak (demo amaçlı) değiştirmesine izin verir; gerçek bir workflow
   motoru yok, ilerleme yalnızca tarayıcıda saklanıyor (bkz. panel.js).
   Minimalist tek satır "kapalı ok" (chevron) şeridi — ilk sürüm (daire +
   altında etiket, üç satıra yayılan) çok yer kaplıyordu; her adım artık
   clip-path ile oyulmuş bir ok/sekme, bir sonrakinin çentiğine negatif
   margin'le geçiyor, tek satırda kalması için etiketler kısaltılıyor
   (text-overflow: ellipsis) — sarmıyor, taşmıyor. */
.panel-stepper[hidden] { display: none; }
.panel-stepper { display: flex; margin: 0 0 20px; padding: 0; list-style: none; font-size: 11px; }
.stepper-step { position: relative; display: flex; flex: 1 1 0; align-items: center; min-width: 0; height: 30px; padding: 0 16px 0 22px; margin-left: -11px; color: var(--muted); background: var(--line); cursor: pointer; font-weight: 600; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); transition: background 120ms linear, color 120ms linear; }
.stepper-step:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.stepper-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); }
.stepper-dot { flex: none; margin-right: 6px; font-weight: 700; }
.stepper-label { overflow: hidden; text-overflow: ellipsis; }
.stepper-step.is-done { color: #fff; background: var(--electric); }
.stepper-step.is-current { color: #fff; background: var(--blue); }
.panel-halo { overflow: hidden; margin-bottom: clamp(28px, 3vw, 40px); border: 1px solid var(--line); border-radius: 4px; }
.panel-halo iframe { display: block; width: 100%; height: 1060px; border: 0; }
/* 6. adımın (Proje dosyasının oluşturulması) A/B/C alt-chevron'u — panel-stepper
   ile AYNI görsel dil (aynı clip-path oyma tekniği) ama BİLEREK ayrı sınıf
   adları (.stage-step, .stage-dot, .stage-label): panel.js'teki stepperSteps
   dashboard.querySelectorAll('.stepper-step') ile TÜM panelde tarıyor ve
   data-step'i parseInt ediyor — A/B/C gibi sayısal olmayan bir değer NaN
   üretip o mantığı bozardı, bu yüzden çakışmayı önlemek için ayrı isimlendirme
   şart (bkz. panel.js'teki renderStage6). */
.stage-stepper[hidden] { display: none; }
.stage-stepper { display: flex; margin: 0 0 24px; padding: 0; list-style: none; font-size: 11px; }
.stage-step { position: relative; display: flex; flex: 1 1 0; align-items: center; min-width: 0; height: 30px; padding: 0 16px 0 22px; margin-left: -11px; color: var(--muted); background: var(--line); cursor: pointer; font-weight: 600; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); transition: background 120ms linear, color 120ms linear; }
.stage-step:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.stage-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); }
.stage-dot { flex: none; margin-right: 6px; font-weight: 700; }
.stage-label { overflow: hidden; text-overflow: ellipsis; }
.stage-step.is-done { color: #fff; background: var(--electric); }
.stage-step.is-current { color: #fff; background: var(--blue); }
/* Seçilen Projeler — halo-network.html iframe'inden postMessage ile gelen
   işaretli (checkbox) programların listesi; kurum rengi halo'daki node/liste
   renkleriyle aynı (KOSGEB mavi, TÜBİTAK kırmızı), bkz. panel.js. */
.selected-projects-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: clamp(28px, 3vw, 40px); }
.selected-project { padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 4px; font-size: 13px; }
.selected-project b { font-weight: 600; }
.selected-project .muted { margin-top: 2px; color: var(--muted); font-size: 12px; }
.selected-project.inst-kosgeb { border-left-color: var(--electric); }
.selected-project.inst-kosgeb b { color: var(--electric); }
.selected-project.inst-tubitak { border-left-color: var(--red); }
.selected-project.inst-tubitak b { color: var(--red); }

/* Uygunluk / onay (step-4) — 2. ve 3. adım özeti + örnek 3 katmanlı destek
   mekanizması önerisi (bkz. panel.js için renderEligibilitySummary). Program
   listesi .selected-project'i (kurum rengi) aynen yeniden kullanıyor. */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; overflow: hidden; margin-bottom: clamp(28px, 3vw, 40px); border: 1px solid var(--line); border-radius: 4px; background: var(--line); }
.summary-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #fff; }
.summary-label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.summary-value { color: var(--ink); font-size: 14px; font-weight: 600; }
.summary-value.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }
.eligibility-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(28px, 3vw, 40px); }
.eligibility-col { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.eligibility-col-header { padding: 10px 12px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.eligibility-col-header.eligibility-high { background: #2f8f4e; }
.eligibility-col-header.eligibility-mid { background: var(--blue-2); }
.eligibility-col-header.eligibility-cond { background: #b45309; }
.eligibility-col-list { display: flex; flex: 1; flex-direction: column; gap: 8px; max-height: 520px; padding: 10px; overflow-y: auto; background: #fbfbfd; }
.eligibility-col-list .selected-project { display: flex; align-items: flex-start; gap: 9px; background: #fff; }
.eligibility-select { display: flex; flex: none; align-items: center; height: 18px; padding-top: 2px; cursor: pointer; }
.eligibility-select input { width: 15px; height: 15px; margin: 0; accent-color: var(--electric); cursor: pointer; }
.eligibility-body { min-width: 0; flex: 1; }
.eligibility-actions { display: flex; justify-content: flex-end; margin-bottom: clamp(28px, 3vw, 40px); }

/* Adım "İleri" çubuğu (step-1..4) — ilerleme doğrulaması ENGELLEYİCİ değil,
   yalnızca uyarır: seçim eksikse buton sallanır + kapatılana kadar açık
   kalan bir uyarı balonu belirir, ama kullanıcı yine de bir sonraki adıma
   geçebilir (bkz. panel.js initNextBar). Balon her adımın kendi
   .panel-nextbar'ı içinde, o çubuğa göre konumlanıyor (position:relative
   üzerinde position:absolute) — dört adımda da aynı, tek paylaşımlı bir
   öge yerine dört kopya, konumlandırma JS'i gerektirmemek için. */
.panel-nextbar { position: relative; display: flex; justify-content: flex-end; margin-top: 8px; }
.panel-next-btn { flex: none; height: 44px; padding: 0 26px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; transition: background 120ms linear; }
.panel-next-btn:hover { background: var(--electric); }
.panel-next-btn.is-shake { animation: panel-next-shake 420ms ease; }
@keyframes panel-next-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.panel-next-warning { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5; width: min(340px, 90vw); padding: 14px 34px 14px 16px; border: 1px solid var(--red); border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(20, 20, 40, .12); animation: panel-next-warning-in 180ms ease; }
.panel-next-warning[hidden] { display: none; }
.panel-next-warning::after { content: ""; position: absolute; right: 20px; top: 100%; width: 10px; height: 10px; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); background: #fff; transform: rotate(45deg) translateY(-6px); }
.panel-next-warning-text { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.45; }
.panel-next-warning-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.panel-next-warning-close:hover { color: var(--red); background: var(--line); }
@keyframes panel-next-warning-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Başlık satırındaki İleri (aynı buton/uyarı mekanizması, panel.js'te tek
   bir .panel-next-btn dinleyicisi ikisini de kapsıyor) — burada uyarı
   balonu YUKARIDA değil AŞAĞIDA açılmalı, yoksa üst menü şeridiyle çakışır;
   ok işareti de buna göre ters çevrildi. */
.panel-nextbar-top { margin-top: 0; }
.panel-nextbar-top .panel-next-warning { top: calc(100% + 10px); bottom: auto; }
.panel-nextbar-top .panel-next-warning::after { top: auto; bottom: 100%; border-right: 0; border-bottom: 0; border-left: 1px solid var(--red); border-top: 1px solid var(--red); transform: rotate(45deg) translateY(6px); }

/* Ödeme (step-5) başlığının sağındaki bütçe hatırlatma kartı — 3. adımda
   (İhtiyaçların belirlenmesi) ayrılan F.1-F.6 kırılımını bir yığın çubukla
   özetliyor (bkz. panel.js renderBudgetRecap). Kırılımın kendisi (çubuk
   segmentleri + lejant) hâlâ monokrom — 6 kategoriyi birbirinden ayırt
   etmek için renk değil kontrast kullanılıyor; yalnızca başlık/toplam tutar
   markanın vurgu rengiyle (--electric) öne çıkarılıyor. */
.budget-recap { display: flex; align-items: flex-start; align-self: flex-start; gap: 20px; flex: none; width: min(560px, 100%); }
/* İki kolon: solda rakamlar (Ayırdığınız Bütçe/toplam), sağında çubuk +
   HEMEN ALTINDA F.1-F.6 metin lejantı — kullanıcı isteği: rakamlar
   çubuğun/lejantın "üstünde" değil, yanında dursun. .budget-recap de
   align-self:flex-start ile .panel-topbar'ın (align-items:flex-end)
   varsayılan alt-hizalamasından çıkarıldı ki "5. Ödeme" başlığıyla aynı
   hizada görünsün (yalnızca bu öge; diğer adımların topbar aksiyon
   butonları etkilenmiyor). */
.budget-recap-figures { flex: none; padding-top: 2px; }
.budget-recap-chart { flex: 1; min-width: 0; }
/* .panel-topbar p{color:var(--muted)} (bkz. yukarıdaki .panel-topbar
   bloğu) tek class'lı bir kuraldan daha spesifik (0,1,1 > 0,1,0) — bu
   yüzden burada .budget-recap ile birlikte hedefleniyor, yoksa mavi
   rengi geçersiz kılınırdı. */
.budget-recap .budget-recap-label { margin: 0; color: var(--electric); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.budget-recap-empty { margin: 4px 0 0; max-width: 26ch; color: var(--muted); font-size: 12px; line-height: 1.4; }
.budget-recap-total[hidden], .budget-recap-bar[hidden] { display: none; }
.budget-recap .budget-recap-total { margin: 2px 0 0; color: var(--electric); font-size: 20px; font-weight: 700; white-space: nowrap; }
.budget-recap-bar { display: flex; overflow: hidden; height: 14px; margin-bottom: 10px; border-radius: 999px; background: var(--line); }
.budget-recap-bar span { display: block; height: 100%; }
.budget-recap-bar span:not(:last-child) { border-right: 1px solid #fff; }
.budget-recap-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.budget-recap-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; }
.budget-recap-swatch { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.budget-recap-name { overflow: hidden; min-width: 0; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.budget-recap-pct { flex: none; margin-left: auto; color: var(--muted); font-weight: 600; }

/* Ödeme (step-5) — paket seçimi (lean SaaS-tarzı 4'lü fiyat kartı) → mock
   ödeme ekranı → onay. TODO(real-backend): gerçek bir ödeme sağlayıcısı yok;
   yalnızca UI akışı + localStorage (bkz. panel.js). */
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(28px, 3vw, 40px); }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: 22px 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: border-color 120ms linear, box-shadow 120ms linear; }
/* Reserves the same height for title/desc/price/audience across all 4 cards
   so the CTA buttons land on the same row regardless of how much text a
   given card has above them (e.g. package 1's extra discount line) — the
   text itself is free to run short or long within that reserved space.
   Tiered by width because narrower cards wrap more text onto more lines
   (measured worst case per tier, package 1's content, + a small buffer). */
.pricing-top { min-height: 238px; }
.pricing-card.is-highlighted { border-color: var(--blue); }
.pricing-card.is-selected { border-color: var(--electric); box-shadow: 0 0 0 1px var(--electric); }
.pricing-badge { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pricing-card h3 { margin: 6px 0 8px; font: 600 16px/1.25 var(--font-editorial); color: var(--ink); }
.pricing-desc { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pricing-price { margin-bottom: 16px; color: var(--ink); font-size: 26px; font-weight: 700; }
.pricing-price span { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
.pricing-price-quote { font-size: 17px; font-weight: 600; color: var(--muted); }
.pricing-price-was { display: block; margin-bottom: 2px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: line-through; }
.pricing-discount-note { display: inline-block; margin: -10px 0 14px; padding: 3px 9px; border-radius: 999px; background: var(--electric); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.pricing-audience { margin: -8px 0 16px; color: var(--muted); font-size: 12px; font-style: italic; line-height: 1.4; }
.pricing-cta { height: 42px; border: 1px solid var(--electric); border-radius: 4px; background: none; color: var(--electric); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; }
.pricing-card.is-selected .pricing-cta { background: var(--electric); color: #fff; }
.pricing-cta-ghost { border-color: var(--line); color: var(--ink); }
.pricing-cta-calendar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.pricing-scope { flex: 1; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
/* .pricing-top's min-height (above) only covers the widest 4-column layout —
   narrower cards wrap package 1's text onto more lines, so the reserved
   height has to grow before the ≤900px breakpoint switches to 2 columns
   (measured worst case per width tier + a small buffer). */
@media (max-width: 1300px) { .pricing-top { min-height: 272px; } }
@media (max-width: 1050px) { .pricing-top { min-height: 292px; } }
@media (max-width: 950px)  { .pricing-top { min-height: 312px; } }
.pricing-scope-label { margin: 0 0 8px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pricing-scope-list { margin: 0 0 16px; padding-left: 16px; color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.pricing-scope-list:last-child { margin-bottom: 0; }
.pricing-scope-list li { margin-bottom: 4px; }
.pricing-scope-list li::marker { color: var(--electric); }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; margin-bottom: clamp(28px, 3vw, 40px); }
.checkout-methods { display: flex; flex-direction: column; gap: 16px; }
.checkout-method { padding: 20px; border: 1px solid var(--line); border-radius: 6px; }
.checkout-method-label { margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.checkout-method h3 { margin: 0 0 8px; font: 600 16px/1.25 var(--font-editorial); color: var(--ink); }
.checkout-method-desc { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.checkout-iban { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 4px; background: #fbfbfd; }
.checkout-iban-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.checkout-iban-row span:first-child { color: var(--muted); }
.checkout-iban-row span:last-child { color: var(--ink); font-weight: 600; font-family: "IBM Plex Mono", ui-monospace, monospace; text-align: right; }
a.panel-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.checkout-summary { padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fbfbfd; }
.checkout-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.checkout-summary .panel-action, .checkout-summary .panel-action-ghost { display: block; width: 100%; margin-bottom: 10px; text-align: center; }
.panel-form-actions button.panel-action-ghost { color: var(--ink); background: none; border: 1px solid var(--line); }

.checkout-success { max-width: 480px; margin: 0 auto clamp(28px, 3vw, 40px); padding: 32px; border: 1px solid var(--line); border-radius: 6px; background: #fbfbfd; text-align: center; }
.checkout-success h2 { margin: 0 0 10px; color: var(--blue); }
.checkout-success p { margin: 0 0 22px; color: var(--muted); line-height: 1.5; }

/* Firmanın Durumu — çok sütunlu ("Miller columns") şirket profili
   oluşturucu. Tüm seçenekler her zaman görünür (açılır liste/modal yok);
   seçili satır koyulaşır ve sağa dönük bir ok (›) ile bir sonraki sütuna
   işaret eder. Üstteki .profile-path şeridi seçili değerleri tek satırda
   birleştirir (bkz. panel.js). */
.profile-path { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: #fbfbfd; color: var(--ink); font-size: 13px; font-weight: 600; }
.profile-path .seg.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }
.profile-path .sep { color: var(--muted); font-size: 11px; }
.company-profile { display: flex; gap: 14px; margin-bottom: clamp(28px, 3vw, 40px); padding-bottom: 4px; overflow-x: auto; }
.profile-column { display: flex; flex: 0 0 210px; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.profile-column-header { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.profile-option-list { flex: 1; margin: 0; padding: 4px; overflow-y: auto; max-height: 420px; list-style: none; }
.profile-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 0; border-radius: 3px; background: none; color: var(--ink); cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.35; }
.profile-option.is-selected { background: var(--line); font-weight: 600; }
.profile-option.is-selected::after { content: '›'; flex: none; color: var(--electric); font-size: 15px; font-weight: 700; }
.profile-option-diger-btn { color: var(--muted); font-style: italic; }
.profile-option-diger-btn.is-selected { color: var(--ink); font-style: normal; }
.profile-diger-input { width: 100%; padding: 7px 8px; border: 1px solid var(--electric); border-radius: 3px; color: var(--ink); font-family: inherit; font-size: 13px; outline: none; }
.panel-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; }
.panel-tool-card { display: block; width: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 2px; background: none; cursor: pointer; text-align: left; font-family: inherit; transition: border-color 120ms linear, background 120ms linear; }
.panel-tool-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 17px/1.2 var(--font-editorial); color: var(--blue); }
.panel-tool-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

.panel-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
.panel-form .full { grid-column: 1 / -1; }
.panel-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.panel-form input, .panel-form select, .panel-form textarea { height: 46px; padding: 0 14px; border: 1px solid var(--muted); border-radius: 2px; color: var(--ink); font-family: var(--font-ui); font-size: 14px; font-weight: 400; outline-color: var(--electric); }
.panel-form textarea { height: auto; min-height: 100px; padding: 12px 14px; resize: vertical; }
.panel-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; grid-column: 1 / -1; margin-top: 4px; }
.panel-form-actions button { height: 46px; padding: 0 22px; border: 0; border-radius: 4px; color: #fff; background: var(--electric); cursor: pointer; font-family: inherit; font-weight: 600; }
.panel-demo-note { margin: 0; max-width: 32ch; color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (hover: hover) {
  a:hover .arrow, .arrow:hover { transform: translateX(4px); background: rgba(255,255,255,.15); }
  .hub-card:hover .arrow { background: rgba(5,28,44,.08); }
  .mega-menu a:hover { color: var(--electric); }
  .search-panel button:hover { background: var(--electric-hover); }
  .drawer-link:hover, .footer-grid a:hover { color: #fff; }
  .related-list a:hover { color: var(--electric); border-top-color: var(--electric); }
  .app-card:hover { border-color: #8fb0ff; background: rgba(255,255,255,.04); }
  .app-card:hover h3 { color: #8fb0ff; }
  .auth-tab:hover { color: var(--ink); }
  .account-link:hover { color: var(--electric); }
  .cmdk-trigger:hover { border-color: var(--muted); color: var(--ink); }
  .cmdk-item:hover { background: var(--light-blue); color: var(--electric); }
  .panel-nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
  .panel-nav-subitem:not(.is-current):hover { color: #fff; background: rgba(255,255,255,.08); }
  .panel-nav-adminsubitem:not(.is-current):hover { color: #fff; background: rgba(255,255,255,.08); }
  .panel-nav-newproject:hover { border-color: #8fa0c2; color: #fff; }
  .project-card-open:hover { background: var(--electric); color: #fff; }
  .panel-logout:hover { color: #fff; }
  .panel-tool-card:hover { border-color: var(--electric); background: var(--light-blue); }
  .panel-tool-card:hover .arrow { transform: translateX(4px); }
  .panel-action:hover { background: var(--electric-hover); }
  .panel-action-ghost:hover { border-color: var(--muted); background: var(--line); }
  .pricing-card:hover { border-color: var(--electric); }
  .pricing-cta:hover { background: var(--electric); color: #fff; }
  .pricing-cta-ghost:hover { background: var(--light-blue); color: var(--electric); border-color: var(--electric); }
  .profile-option:not(.is-selected):hover { background: var(--light-blue); }
  .stepper-step:not(.is-current):not(.is-done):hover { background: var(--light-blue); color: var(--electric); }
  .stage-step:not(.is-current):not(.is-done):hover { background: var(--light-blue); color: var(--electric); }
}

/* ≤480px — komut menüsü tetikleyicisi dar alanda yalnızca simge kalır */
@media (max-width: 480px) {
  .cmdk-trigger .cmdk-label { display: none; }
  .cmdk-trigger { padding: 0 8px; }
}

/* ≤1080px — nav çekmeceye kapanır */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .mega-menu { grid-template-columns: minmax(0, 1fr); }
}

/* ≤900px — 2 kolonlu bloklar tek kolona iner */
@media (max-width: 900px) {
  .topic-hero, .app-promo { grid-template-columns: minmax(0, 1fr); }
  .topic-hero-visual { order: -1; min-height: clamp(220px, 48vw, 320px); }
  .app-promo p { max-width: min(100%, 56ch); }
  .app-promo h2 { max-width: min(100%, 24ch); }
  .cta-band p { max-width: min(100%, 56ch); }
  .cta-band h2 { max-width: min(100%, 24ch); }
  .cards, .cards.cards-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .app-card p { max-width: min(100%, 46ch); }
  .panel-dashboard { flex-direction: column; }
  .panel-sidebar { flex-direction: row; align-items: center; width: auto; overflow-x: auto; }
  .panel-nav { flex-direction: row; }
  .panel-nav-item { flex: none; white-space: nowrap; }
  /* Alt dal (7 aşama) yatay sekme şeridine sığmıyor — daralınca gizleniyor;
     aynı 7 aşama üstteki panel-stepper'da (chevron şerit) zaten erişilebilir. */
  .panel-nav-sub { display: none; }
  .panel-sidebar-account { flex: none; margin-left: auto; padding-top: 0; padding-left: 18px; border-top: 0; border-left: 1px solid rgba(255,255,255,.18); }
  .panel-stepper { overflow-x: auto; padding-bottom: 4px; }
  .stepper-step { flex: 0 0 128px; }
  .stage-stepper { overflow-x: auto; padding-bottom: 4px; }
  .stage-step { flex: 0 0 128px; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ≤640px — tek kolon + dar kenar boşluğu tabanı */
@media (max-width: 640px) {
  :root { --header-h: 60px; --gutter: 16px; }
  .cards, .cards.cards-4 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .related-list { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: span 2; }
  .toast { right: 12px; left: 12px; max-width: none; }
  .topic-hero-copy h1, .hub-hero h1 { max-width: 100%; }
  .panel-form { grid-template-columns: minmax(0, 1fr); }
  .panel-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .eligibility-groups { grid-template-columns: minmax(0, 1fr); }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-user-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .admin-user-row.is-header { display: none; }
  .admin-user-detail { padding-left: 16px; }
}

@media (max-width: 360px) {
  .nav-actions { font-size: 13px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: auto; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .topic-hero-copy { padding-block: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .menu-drawer, .drawer-scrim, .toast, .mega-menu, .search-panel { display: none !important; }
  body { color: #000; }
  .topic-hero, .help, .quote-band, .app-promo, .cta-band, .hub-hero, footer { color: #000; background: #fff; }
}