:root {
  /* Palette based on your UD logo (soft blues + deep navy) */
  --ugur-bg: #f3f7fb;              /* very light blue-gray */
  --ugur-card-bg: #ffffff;
  --ugur-border: rgba(23, 66, 99, 0.12);
  --ugur-text: #0f1f2f;            /* deep ink */
  --ugur-muted: rgba(15, 31, 47, 0.70);
  --ugur-link: #2f86b7;            /* main blue */
  --ugur-link-hover: #1e6a95;
  --ugur-accent: #86d3f3;          /* light cyan */
  --ugur-header-bg: rgba(255, 255, 255, 0.78);
  --ugur-footer-bg: #0b2234;       /* navy */
  --ugur-footer-text: rgba(243, 247, 251, 0.80);
  --ugur-shadow: 0 12px 30px rgba(11, 34, 52, 0.10);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(134, 211, 243, 0.32), transparent 60%),
    radial-gradient(900px 520px at 92% 18%, rgba(47, 134, 183, 0.18), transparent 55%),
    var(--ugur-bg);
  color: var(--ugur-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Front page: center image captions (CKEditor caption filter output). */
body.path-frontpage figure.caption {
  text-align: center;
}

body.path-frontpage figure.caption > figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 750;
  color: rgba(15, 31, 47, 0.70);
}

a {
  color: var(--ugur-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ugur-link-hover);
}

/* CTA link (can be used in About page body) */
.ugur-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(47, 134, 183, 0.45);
  background: linear-gradient(135deg, rgba(47, 134, 183, 0.95), rgba(30, 106, 149, 0.95));
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(11, 34, 52, 0.10);
}

.ugur-cta:hover {
  color: #ffffff;
  filter: brightness(1.03);
}

/* Contact page polish */
body.path-contact .layout-content {
  padding: clamp(18px, 3vw, 30px);
}

body.path-contact .layout-content h1 {
  margin-bottom: 10px;
}

body.path-contact .layout-content form {
  margin-top: 14px;
}

body.path-contact .layout-content .form-item {
  margin: 14px 0;
}

body.path-contact .layout-content label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 31, 47, 0.82);
}

body.path-contact .layout-content .form-required::after {
  color: rgba(47, 134, 183, 0.9);
}

body.path-contact .layout-content input[type="text"],
body.path-contact .layout-content input[type="email"],
body.path-contact .layout-content input[type="tel"],
body.path-contact .layout-content input[type="url"],
body.path-contact .layout-content input[type="search"],
body.path-contact .layout-content textarea {
  width: 100%;
  max-width: 820px;
  appearance: none;
  border-radius: 14px;
  border: 1px solid var(--ugur-border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ugur-text);
  padding: 12px 14px;
  outline: none;
  box-shadow: 0 1px 0 rgba(11, 34, 52, 0.04);
}

body.path-contact .layout-content textarea {
  min-height: 180px;
  resize: vertical;
}

body.path-contact .layout-content input:focus,
body.path-contact .layout-content textarea:focus {
  border-color: rgba(47, 134, 183, 0.55);
  box-shadow:
    0 0 0 4px rgba(134, 211, 243, 0.35),
    0 10px 24px rgba(11, 34, 52, 0.08);
}

body.path-contact .layout-content .description,
body.path-contact .layout-content .form-item--description {
  margin-top: 6px;
  color: rgba(15, 31, 47, 0.62);
  font-size: 13px;
}

/* CAPTCHA block */
body.path-contact .layout-content fieldset.captcha {
  max-width: 820px;
  margin-top: 18px;
  padding: 14px 14px 10px;
  border-radius: 16px;
  border: 1px solid rgba(47, 134, 183, 0.18);
  background: rgba(255, 255, 255, 0.70);
}

body.path-contact .layout-content fieldset.captcha legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 31, 47, 0.78);
}

body.path-contact .layout-content fieldset.captcha .fieldset-wrapper {
  margin-top: 10px;
}

body.path-contact .layout-content fieldset.captcha img {
  border-radius: 10px;
  border: 1px solid rgba(23, 66, 99, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

/* Actions */
body.path-contact .layout-content .form-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.path-contact .layout-content .form-actions input[type="submit"],
body.path-contact .layout-content .form-actions button[type="submit"] {
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(47, 134, 183, 0.45);
  background: linear-gradient(135deg, rgba(47, 134, 183, 0.95), rgba(30, 106, 149, 0.95));
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  margin: 0;
}

body.path-contact .layout-content .form-actions input[type="submit"]:hover,
body.path-contact .layout-content .form-actions button[type="submit"]:hover {
  filter: brightness(1.03);
}

body.path-contact .layout-content .form-actions input[type="submit"]:active,
body.path-contact .layout-content .form-actions button[type="submit"]:active {
  transform: translateY(1px);
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Layout shell */
.layout-container {
  min-height: 100vh;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ugur-header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ugur-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

/* Branding block */
.site-branding .block-system-branding-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-branding .site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-branding .site-logo img {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  background: transparent;
}

.site-branding .site-name a {
  font-weight: 800;
  color: var(--ugur-text);
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Menu blocks from regions usually render as <ul class="menu"> */
.site-nav .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav .menu a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ugur-text);
  text-decoration: none;
}

.site-nav .menu a:hover {
  background: rgba(47, 134, 183, 0.10);
  color: var(--ugur-link-hover);
}

/* Search block (header / sidebar) */
.site-header .block-search,
.site-header .search-block-form,
.site-header form[id^="search-block-form"],
.site-header form.search-block-form,
.site-header form[action*="/search"] {
  margin: 0;
}

.search-block-form,
form[id^="search-block-form"],
form.search-block-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Input */
.search-block-form input[type="search"],
.search-block-form input[type="text"],
form[id^="search-block-form"] input[type="search"],
form[id^="search-block-form"] input[type="text"] {
  appearance: none;
  width: min(260px, 48vw);
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ugur-border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ugur-text);
  outline: none;
  box-shadow: 0 1px 0 rgba(11, 34, 52, 0.04);
  margin: 0;
  display: block;
}

.search-block-form input::placeholder,
form[id^="search-block-form"] input::placeholder {
  color: rgba(15, 31, 47, 0.45);
}

.search-block-form input[type="search"]:focus,
.search-block-form input[type="text"]:focus,
form[id^="search-block-form"] input[type="search"]:focus,
form[id^="search-block-form"] input[type="text"]:focus {
  border-color: rgba(47, 134, 183, 0.55);
  box-shadow:
    0 0 0 4px rgba(134, 211, 243, 0.35),
    0 10px 24px rgba(11, 34, 52, 0.08);
}

/* Button */
.search-block-form input[type="submit"],
.search-block-form button[type="submit"],
form[id^="search-block-form"] input[type="submit"],
form[id^="search-block-form"] button[type="submit"] {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(47, 134, 183, 0.45);
  background: linear-gradient(135deg, rgba(47, 134, 183, 0.95), rgba(30, 106, 149, 0.95));
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.search-block-form input[type="submit"]:hover,
.search-block-form button[type="submit"]:hover,
form[id^="search-block-form"] input[type="submit"]:hover,
form[id^="search-block-form"] button[type="submit"]:hover {
  filter: brightness(1.03);
}

.search-block-form input[type="submit"]:active,
.search-block-form button[type="submit"]:active,
form[id^="search-block-form"] input[type="submit"]:active,
form[id^="search-block-form"] button[type="submit"]:active {
  transform: translateY(1px);
}

@media (max-width: 520px) {
  .search-block-form input[type="search"],
  .search-block-form input[type="text"],
  form[id^="search-block-form"] input[type="search"],
  form[id^="search-block-form"] input[type="text"] {
    width: min(200px, 52vw);
  }
}

.site-main {
  padding: 22px 0 40px;
  flex: 1 0 auto;
}

.layout-content {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--ugur-border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--ugur-shadow);
}

@media (max-width: 720px) {
  .layout-content {
    padding: 18px;
    border-radius: 16px;
  }
}

.layout-content h1 {
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 14px;
}

.layout-content p {
  color: var(--ugur-muted);
}

/* Node (content) polish */
.node__content {
  margin-top: 12px;
}

.field {
  margin: 10px 0;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 31, 47, 0.78);
}

.field__item {
  color: var(--ugur-text);
}

/* Experience node layout (node/1 gibi) */
.page-node-type-experience .node__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 920px) {
  .page-node-type-experience .node__content {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Big blocks take full width */
  .page-node-type-experience .field--name-body,
  .page-node-type-experience .field--name-field-media,
  .page-node-type-experience .field--name-field-media-image {
    grid-column: 1 / -1;
  }
}

/* Meta fields as nice chips when they are short */
.page-node-type-experience .field--name-field-position-role .field__item,
.page-node-type-experience .field--name-field-company .field__item,
.page-node-type-experience .field--name-field-location .field__item,
.page-node-type-experience .field--name-field-period .field__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(134, 211, 243, 0.22);
  border: 1px solid rgba(47, 134, 183, 0.20);
  color: var(--ugur-text);
  font-weight: 650;
}

/* Experience node: meta row (company/location/period) – inline, clean (no blue chips). */
.page-node-type-experience .experience-node-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 4px 0 10px;
  padding: 0;
}

.page-node-type-experience .experience-node-meta .field {
  margin: 0;
  display: flex;
  align-items: center;
}

.page-node-type-experience .experience-node-meta .field__label {
  display: none;
}

.page-node-type-experience .experience-node-meta .field__item {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(15, 31, 47, 0.78);
  font-weight: 750;
  letter-spacing: -0.01em;
}

.page-node-type-experience .experience-node-meta .field:not(:last-child)::after {
  content: "•";
  margin: 0 10px;
  color: rgba(15, 31, 47, 0.35);
}

/* Media inside experience */
.page-node-type-experience .field--name-field-media.field__items,
.page-node-type-experience .field--name-field-media-image.field__items,
.page-node-type-experience .field--name-field-media .field__items,
.page-node-type-experience .field--name-field-media-image .field__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  justify-items: center;  /* Küçük olan foto kendi hücresinde ortalanır */
}

@media (max-width: 560px) {
  .page-node-type-experience .field--name-field-media.field__items,
  .page-node-type-experience .field--name-field-media-image.field__items,
  .page-node-type-experience .field--name-field-media .field__items,
  .page-node-type-experience .field--name-field-media-image .field__items {
    grid-template-columns: 1fr;
  }
}

/* MEDIA'da sadece alt="Ugur" fotoğrafı varsa grid yok (CoinTR node/1; Werover'da Ugur yok, grid kalır) */
.page-node-type-experience .field--name-field-media .field__items:has(img[alt="Ugur"]),
.page-node-type-experience .field--name-field-media-image .field__items:has(img[alt="Ugur"]) {
  display: block;
  grid-template-columns: unset;
  gap: 0;
}

/* Werover (node/3) vb.: Ugur fotoğrafı yoksa grid zorunlu, 2 sütun */
.page-node-type-experience .field--name-field-media .field__items:has(.field__item:nth-child(2)):not(:has(img[alt="Ugur"])),
.page-node-type-experience .field--name-field-media-image .field__items:has(.field__item:nth-child(2)):not(:has(img[alt="Ugur"])) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  justify-items: center !important;
}

.page-node-type-experience .field--name-field-media .field__items:has(img[alt="Ugur"]) .field__item,
.page-node-type-experience .field--name-field-media-image .field__items:has(img[alt="Ugur"]) .field__item {
  max-width: 100%;
}

/* Sadece Ugur fotoğrafı (alt="Ugur"): %80 genişlik – Werover görselleri etkilenmez */
.page-node-type-experience .field--name-field-media .field__items img[alt="Ugur"],
.page-node-type-experience .field--name-field-media-image .field__items img[alt="Ugur"] {
  max-width: min(80%, 880px) !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bir foto diğerinden küçükse kendi hücresinde ortalansın */
.page-node-type-experience .field--name-field-media.field__items .field__item,
.page-node-type-experience .field--name-field-media-image.field__items .field__item,
.page-node-type-experience .field--name-field-media .field__items .field__item,
.page-node-type-experience .field--name-field-media-image .field__items .field__item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* MEDIA altı beyaz kutu: tüm olası sarmalayıcılar (node/1 experience sayfası) */
body.page-node-type-experience .layout-content .field--name-field-media,
body.page-node-type-experience .layout-content .field--name-field-media-image,
body.node-type-experience .layout-content .field--name-field-media,
body.node-type-experience .layout-content .field--name-field-media-image,
.page-node-type-experience .field--name-field-media,
.page-node-type-experience .field--name-field-media-image,
.node--type-experience .field--name-field-media,
.node--type-experience .field--name-field-media-image,
.layout-content [class*="field-media"],
.layout-content [class*="field_media"] .field__items,
.page-node-type-experience .field--name-field-media .field__items,
.page-node-type-experience .field--name-field-media-image .field__items,
.page-node-type-experience .field--name-field-media .field__item,
.page-node-type-experience .field--name-field-media-image .field__item,
.page-node-type-experience .field--name-field-media figure,
.page-node-type-experience .field--name-field-media-image figure {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* MEDIA bölümü resimleri: border ve gölge kaldırıldı */
.page-node-type-experience .field--name-field-media img,
.page-node-type-experience .field--name-field-media-image img {
  border: none !important;
  box-shadow: none !important;
}

/* Experience node tek sayfa: içerik kartının arka planını kaldır (beyaz kutu tamamen gitsin) */
body.page-node-type-experience .layout-content,
body.node-type-experience .layout-content {
  background: transparent !important;
  box-shadow: none !important;
}

/* Tek medya için (grid içinde olmayan) - border ve gölge yok */
.page-node-type-experience .field--name-field-media:not(.field__items) img,
.page-node-type-experience .field--name-field-media-image:not(.field__items) img {
  width: auto;
  max-width: min(100%, 1240px) !important;
  max-height: none !important;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  border: none !important;
  box-shadow: none !important;
}

/* Grid içindeki medyalar için - border ve gölge yok */
.page-node-type-experience .field--name-field-media.field__items img,
.page-node-type-experience .field--name-field-media-image.field__items img,
.page-node-type-experience .field--name-field-media .field__items img,
.page-node-type-experience .field--name-field-media-image .field__items img {
  max-width: min(100%, 360px);
  max-height: 260px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  border: none !important;
  box-shadow: none !important;
}

/* CoinTR logosu MEDIA alanında küçük, yatayda ortada, tepeden hizalı */
.page-node-type-experience .field--name-field-media img[alt="CoinTR"],
.page-node-type-experience .field--name-field-media-image img[alt="CoinTR"],
.page-node-type-experience img[src*="COINTR-LOGO"] {
  max-width: min(100%, 880px) !important;
  max-height: 70px !important;
  width: auto;
  height: auto;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Logo hücresinde içerik tepeden hizalansın */
.page-node-type-experience .field--name-field-media .field__item:has(img[alt="CoinTR"]),
.page-node-type-experience .field--name-field-media-image .field__item:has(img[alt="CoinTR"]),
.page-node-type-experience .field__item:has(img[src*="COINTR-LOGO"]) {
  align-items: flex-start;
}

/* Also tame images that are embedded inside the body text. */
.page-node-type-experience .field--name-body img {
  width: auto;
  max-width: min(100%, 620px);
  height: auto;
  display: block;
  margin: 14px auto;
  border-radius: 14px;
  border: 1px solid var(--ugur-border);
  box-shadow: var(--ugur-shadow);
}

.page-node-type-experience .field--name-body {
  line-height: 1.75;
}

.page-node-type-experience .field--name-field-skills .field__item,
.page-node-type-experience .field--name-field-skills-text .field__item {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(47, 134, 183, 0.18);
}

.layout-content > *:first-child {
  margin-top: 0;
}

.site-footer {
  margin-top: auto;
  background: var(--ugur-footer-bg);
  color: var(--ugur-footer-text);
}

.site-footer__inner {
  padding: 26px 0;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__meta {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* Experience View - Card layout */
/* (Width/padding is handled by .container in page.html.twig.) */

.experience-view .experience-grid,
.view-id-experience .view-content,
body.path-experience .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 380px) {
  .experience-view .experience-grid,
  .view-id-experience .view-content,
  body.path-experience .view-content {
    grid-template-columns: 1fr;
  }
}

/* Card wrapper (twig override adds .experience-card). */
.experience-card {
  background: var(--ugur-card-bg);
  border: 1px solid var(--ugur-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 26px rgba(11, 34, 52, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  overflow: hidden;
}

.experience-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 134, 183, 0.28);
  box-shadow: 0 18px 40px rgba(11, 34, 52, 0.12);
}

.experience-card__inner > *:first-child {
  margin-top: 0;
}

.experience-card__inner > *:last-child {
  margin-bottom: 0;
}

.experience-card__header {
  display: grid;
  gap: 10px;
}

/* Fallback if template override isn't active yet. */
.experience-view .views-row,
.view-id-experience .views-row,
body.path-experience .views-row {
  background: var(--ugur-card-bg);
  border: 1px solid var(--ugur-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--ugur-shadow);
}

/* Başlık (Title) */
.experience-view .views-field-title a,
.experience-view .views-field-title {
  font-size: 18px;
  font-weight: 750;
  text-decoration: none;
  color: var(--ugur-text);
}

/* Title from our Views fields override template */
.experience-title {
  margin: 0;
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.experience-title a {
  color: var(--ugur-text);
  text-decoration: none;
}

.experience-title a:hover {
  color: var(--ugur-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Company + Location + Period gibi alanlar */
.experience-view .views-field,
.view-id-experience .views-field,
body.path-experience .views-field {
  margin-top: 6px;
  color: var(--ugur-muted);
  font-size: 14px;
}

/* Meta chips row (role/company/location/period) */
.experience-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.experience-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(134, 211, 243, 0.18);
  border: 1px solid rgba(47, 134, 183, 0.18);
  color: rgba(15, 31, 47, 0.85);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
}

.experience-meta .role {
  background: rgba(47, 134, 183, 0.12);
  border-color: rgba(47, 134, 183, 0.24);
}

/* Field labels: make them readable (or hide via Views UI). */
.experience-view .views-label,
.view-id-experience .views-label,
body.path-experience .views-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ugur-text);
}

.experience-view .field-content,
.view-id-experience .field-content,
body.path-experience .field-content {
  display: block;
  color: var(--ugur-muted);
}

/* Make media/images responsive inside cards. */
.experience-card img,
.view-id-experience .views-row img,
body.path-experience .views-row img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(23, 66, 99, 0.10);
}

.experience-view .views-field-body,
.view-id-experience .views-field-body,
body.path-experience .views-field-body {
  line-height: 1.6;
}

/* Description from our Views fields override template */
.experience-description {
  margin-top: 12px;
  color: var(--ugur-muted);
  font-size: 14px;
  line-height: 1.65;
}

.experience-description .more-link,
.experience-card .more-link,
.view-id-experience .more-link,
body.path-experience .more-link {
  display: none;
}

.experience-description p {
  margin: 0.65em 0 0;
}

.experience-description p:first-child {
  margin-top: 0;
}

/* Skills */
.experience-view .views-field-field-skills,
.experience-view .views-field-field-skills-text {
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
}

.view-id-experience .views-field-field-skills,
.view-id-experience .views-field-field-skills-text {
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
}

body.path-experience .views-field-field-skills,
body.path-experience .views-field-field-skills-text {
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
}

/* Skills from our Views fields override template */
.experience-skills {
  margin-top: 12px;
}

.experience-skills ul,
.experience-skills .item-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.experience-skills li {
  margin: 0;
}

.experience-skills a,
.experience-skills span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(47, 134, 183, 0.16);
  color: rgba(15, 31, 47, 0.82);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}

.experience-skills a:hover {
  border-color: rgba(47, 134, 183, 0.30);
  color: var(--ugur-link-hover);
}