:root{
      --max-width:1100px;
      --accent:#0077c8;
      --muted:#5a5a5a;
      --bg:#f9f9fb;
      --card:#ffffff;
      --radius:12px;
      --gap:18px;
      --hover-bg: rgba(0,119,200,.06);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#222;
    }
    *{box-sizing: border-box;}
    body{margin:0;background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;font-size:17px;}
    .container{max-width:var(--max-width);margin:20px auto;padding:16px;}

    /* HEADER */
    header.site{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:#ffffff;border-radius:12px;box-shadow:0 2px 10px rgba(16,24,40,0.06);margin-bottom:10px;}
    header.site .logo img{height:46px;display:block;}
    nav.main-nav{display:flex;align-items:center;gap:18px;}
    /* SEARCH (standalone under header) */
    .site-search{margin:10px 0 14px;}
    .site-search div{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #eee;border-radius:12px;padding:10px 12px;box-shadow:0 2px 10px rgba(16,24,40,0.05);} 
    .site-search input[type="search"]{flex:1;min-width:0;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;outline:none;box-shadow:inset 0 1px 2px rgba(16,24,40,0.04);} 
    .site-search input[type="search"]:focus{border-color:#bcd9ea;box-shadow:0 0 0 4px rgba(0,119,200,.12);} 
    .site-search button{padding:10px 14px;border:1px solid #0077c8;background:#0077c8;color:#fff;border-radius:10px;font-weight:600;cursor:pointer;white-space:nowrap;}
    .site-search button:hover,.site-search button:focus{background:#066db4;border-color:#066db4;}
    nav.main-nav ul{list-style:none;padding:0;margin:0;display:flex;gap:18px;align-items:center;}
    nav.main-nav a{color:#0b3a61;text-decoration:none;font-weight:600;font-size:15px;padding:6px 8px;border-radius:8px;}
    nav.main-nav a:hover, nav.main-nav a:focus{background:var(--hover-bg);outline-offset:2px;}
   


/* --- Breadcrumb: replace your existing .breadcrumb rule with this --- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;          /* çok uzun başlıkları sarar, taşma önler */
  gap:6px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin-top:10px;
  margin-bottom:16px;
  line-height:1;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 2px 10px rgba(16,24,40,0.05);
}

/* Her breadcrumb öğesini (microdata span) düzgün hizala */
.breadcrumb [itemprop="itemListElement"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
}

/* Uzun başlıkları zarifçe kes */
.breadcrumb [itemprop="name"]{
  display:inline-block;
  max-width:clamp(120px, 30vw, 360px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Linkleri vurgula (site accent rengi) */
.breadcrumb a[itemprop="item"],
.breadcrumb a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  padding:4px 6px;
  border-radius:8px;
}

/* Hover / focus görseli (erişilebilirlik için) */
.breadcrumb a[itemprop="item"]:hover,
.breadcrumb a:hover,
.breadcrumb a[itemprop="item"]:focus{
  text-decoration:underline;
  outline-offset:2px;
  background:var(--hover-bg);
}

/* Varsayılan ayraç / separator span'ları (HTML'de / veya › gibi karakterler span içinde ise bu stil uygulanır) */
.breadcrumb > span:not([itemprop]){
  color:#d0d0d0;           /* ayraçlar gri */
  user-select:none;
  margin:0 6px;
}

/* Dar ekranlarda daha küçük metin ve daha sıkı gap */
@media (max-width:480px){
  .breadcrumb{ font-size:12px; gap:5px; padding:8px 10px; }
  .breadcrumb > span:not([itemprop]){ margin:0 4px; }
}


    /* LAYOUT (kept as provided) */
    main{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;}
    @media(max-width:980px){
      main{grid-template-columns:1fr;}
      .sidebar{order:2} /* keeps sidebar after article on mobile */
      header.site{padding:14px 14px;border-radius:10px;gap:12px;margin-bottom:16px;}
      header.site .logo img{height:40px;}
      .site-search input[type="search"]{width:100%;max-width:none;}
    }

    /* ARTICLE */
    article{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06);}
    .meta{font-size:14px;color:var(--muted);margin-bottom:12px;}
    h1{font-size:28px;margin:0 0 12px;color:#0b3a61;word-break:break-word;}
    .lead strong{display:block;font-size:16px;margin-bottom:12px;color:#111;}
    .content p{margin:0 0 12px;}
    .nutr-table{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0}
    .nutr-table th, .nutr-table td{padding:12px;border:1px solid #eee;font-size:14px;}
    .nutr-table thead th{position:sticky;top:0;background:#fafafa;z-index:1;box-shadow:inset 0 -1px 0 #eee;}
    .nutr-table tbody tr:nth-child(even){background:#fcfcfd;}
    .porzioni ul{padding-left:18px;margin:6px 0;}
    .faq h3{font-size:18px;margin:12px 0 6px;}
    .schema-note{font-size:12px;color:var(--muted);margin-top:10px;}

    /* SIDEBAR */
    .sidebar{position:relative;}
    .sidebar .card{background:var(--card);padding:12px;border-radius:10px;text-align:left;box-shadow:0 4px 12px rgba(13,20,30,0.04);margin-bottom:12px;}
    .sidebar .card h3{margin:0 0 8px;font-size:16px;}
    .sidebar .card p{margin:0;color:var(--muted);font-size:14px;word-break:break-word;}

    /* Related cards */
    .related{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px;}
    .related .card{padding:8px;}
    .related .card img{width:100%;height:90px;object-fit:cover;border-radius:8px;margin-bottom:8px;}
    .related .card a{color:#0b3a61;text-decoration:none;font-weight:600;font-size:14px;display:block;}

    footer{margin-top:20px;text-align:center;padding:14px 0;color:var(--muted);font-size:13px;}

    /* FIX: mobile sidebar/info card adjustments (kept and minimal) */
    @media (max-width:980px){
      .sidebar .card{width:100%;display:block;padding:14px;margin:8px 0;border-radius:10px;}
      /* ensure the info card's inner inline elements wrap nicely */
      .sidebar .card p{white-space:normal;word-wrap:break-word;}
      .container{padding:12px;}
      h1{font-size:24px;}
    }

    /* small helper */
    .muted{color:var(--muted);font-size:13px;}
    /* A11y helper for visually hidden labels */
    .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap;border:0;padding:0;margin:-1px;}


/* Container */
.tags-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 0px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Liste */
.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

/* Etiketler */
.tag-item {
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover efekti */
.tag-item:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 500px) {
  .tag-item {
    padding: 5px 10px;
    font-size: 13px;
  }
}