/* Desktop navigation dropdowns */
@media (min-width: 900px) {
  header nav .dnav { display:flex; align-items:center; gap:clamp(8px,1.1vw,18px); min-width:0; }
  header nav .dnav-disclosure { position:relative; flex:none; }
  header nav .dnav-disclosure > summary { list-style:none; display:flex; align-items:center; gap:7px; min-height:42px; padding:8px 10px; border-radius:999px; color:inherit; font:inherit; cursor:pointer; white-space:nowrap; }
  header nav .dnav-disclosure > summary::-webkit-details-marker { display:none; }
  header nav .dnav-disclosure[open] > summary,
  header nav .dnav-disclosure > summary:hover { background:#eaf5f5; color:#087f8c; }
  header nav .dnav-menu { position:absolute; z-index:100; top:calc(100% + 8px); left:0; display:grid; gap:3px; min-width:220px; max-width:min(300px,80vw); padding:8px; border:1px solid #e0e9e8; border-radius:15px; background:#fff; box-shadow:0 16px 40px #173b4a20; }
  header nav .dnav-menu a { display:block; padding:10px 12px; border-radius:9px; color:#234755; font-size:13px; line-height:1.35; text-decoration:none; }
  header nav .dnav-menu a:hover, header nav .dnav-menu a:focus-visible { background:#edf7f6; color:#087f8c; }
  header nav .dnav-disclosure[open] { z-index:101; }
  header nav .dnav > a { flex:none; white-space:nowrap; }
}
@media (min-width:900px) and (max-width:1120px) {
  header nav .dnav { gap:4px; }
  header nav .dnav-disclosure > summary { padding-inline:7px; font-size:12px; }
  header nav .dnav > a { font-size:12px; }
}

/* Centered article masthead with an integrated, restrained cover image. */
html body main#icerik .blog-detail-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:clamp(24px,4vw,42px) 24px 24px; }
html body main#icerik .blog-detail-hero .blog-article-title { max-width:850px; margin:0 auto; text-align:center; }
html body main#icerik .blog-refresh-page header.blog-detail-hero h1.blog-article-title { width:100%; text-align:center!important; }
html body main#icerik .blog-refresh-page header.blog-detail-hero .blog-eyebrow { align-self:center; text-align:center; }
html body main#icerik .blog-detail-hero .blog-post-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; width:100%; margin:0; }
html body main#icerik .blog-detail-hero .blog-article-cover { width:min(100%,360px); margin:6px auto 0; overflow:hidden; border:1px solid #dce8e6; border-radius:16px; background:#fff; box-shadow:0 8px 24px #173b4a12; }
html body main#icerik .blog-detail-hero .blog-article-cover img { display:block; width:100%; height:190px; object-fit:cover; }
html body main#icerik .blog-detail-hero .blog-article-cover figcaption { padding:8px 12px; color:#687e86; font-size:11px; text-align:left; }
html body main#icerik .blog-toc-horizontal { position:static; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; width:100%; margin:0 auto 16px; padding:12px 16px; border:1px solid #dce9e8; border-radius:15px; background:linear-gradient(110deg,#f4faf9,#fff); box-shadow:0 5px 18px #173b4a08; }
html body main#icerik .blog-toc-horizontal .blog-reading-label { flex:0 0 auto; margin:0; }
html body main#icerik .blog-toc-horizontal > b { flex:0 0 auto; font-size:14px; }
html body main#icerik .blog-toc-horizontal nav { flex:1 1 100%; min-width:0; }
html body main#icerik .blog-toc-horizontal ol { display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
html body main#icerik .blog-toc-horizontal li { flex:0 1 auto; width:auto!important; min-width:0; max-width:100%; margin:0; }
html body main#icerik .blog-toc-horizontal li.is-subsection { margin-left:0; }
html body main#icerik .blog-toc-horizontal a { display:inline-flex!important; width:auto!important; max-width:100%; padding:7px 10px; overflow-wrap:anywhere; border:1px solid #e2ecea; border-radius:999px; background:#fff; color:#42616a; font-size:12px; line-height:1.35; text-decoration:none; }
html body main#icerik .blog-toc-horizontal a:hover, html body main#icerik .blog-toc-horizontal a:focus-visible { border-color:#82c7c8; background:#eff9f8; color:#087f8c; }
html body main#icerik .blog-reading-layout:has(> article.blog-article-content) { display:block; }
html body main#icerik .blog-reading-layout > article.blog-article-content { width:100%; max-width:none; }
@media(max-width:760px) {
  html body main#icerik .blog-detail-hero { gap:10px; padding:24px 16px 18px; }
  html body main#icerik .blog-detail-hero .blog-article-cover { width:min(100%,320px); }
  html body main#icerik .blog-detail-hero .blog-article-cover img { height:160px; }
  html body main#icerik .blog-toc-horizontal { align-items:flex-start; gap:5px 10px; padding:11px; }
  html body main#icerik .blog-toc-horizontal nav { flex-basis:100%; }
  html body main#icerik .blog-toc-horizontal ol { display:grid!important; grid-template-columns:1fr; gap:5px; }
  html body main#icerik .blog-toc-horizontal li { width:100%!important; }
  html body main#icerik .blog-toc-horizontal a { display:block!important; width:100%!important; border-radius:10px; }
}

/* Ferry page spacing: supersede older inline and mobile patches. */
html body main#icerik .ferry-page { padding-bottom:34px!important; }
html body main#icerik .ferry-page .ferry-hero { margin-bottom:16px!important; }
html body main#icerik .ferry-page .ferry-live-panel { margin-bottom:18px!important; padding:17px!important; }
html body main#icerik .ferry-page .ferry-route-shortcuts { min-height:0!important; margin:12px 0 22px!important; gap:10px!important; }
html body main#icerik .ferry-page .ferry-section { margin-bottom:26px!important; }
@media(max-width:760px) {
  html body main#icerik .ferry-page { padding:8px 14px 28px!important; }
  html body main#icerik .ferry-page .ferry-route-shortcuts { min-height:0!important; margin:12px 0 20px!important; }
  html body main#icerik .ferry-page .ferry-section { margin-bottom:22px!important; }
}

/* Canonical route detail pages */
html body main#icerik .ferry-route-page { max-width:1120px; padding:22px 0 48px; color:#193e4e; }
.ferry-route-crumb { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:12px 15px; border:1px solid #e6ece9; border-radius:12px; background:#fff; color:#72838a; font-size:12px; }
.ferry-route-crumb a { color:#087f8c; font-weight:700; text-decoration:none; }
.ferry-route-hero { position:relative; overflow:hidden; padding:clamp(24px,4vw,42px); border-radius:22px; background:linear-gradient(115deg,#103f57,#07818a); color:#fff; }
.ferry-route-hero:after { position:absolute; top:-180px; right:-60px; width:410px; height:410px; border:1px solid #ffffff28; border-radius:50%; box-shadow:0 0 0 34px #ffffff0c,0 0 0 70px #ffffff08; content:""; pointer-events:none; }
.ferry-route-eyebrow { display:block; margin:0 0 8px; color:#078493; font-size:10px; font-weight:850; letter-spacing:.13em; }
.ferry-route-hero .ferry-route-eyebrow { color:#b5e5e4; }
html body main#icerik .ferry-route-page .ferry-route-hero h1 { position:relative; z-index:1; max-width:780px; margin:0 0 10px; color:#fff!important; font-size:clamp(28px,4vw,44px); line-height:1.12; }
.ferry-route-hero p { position:relative; z-index:1; max-width:760px; margin:0; color:#e3f2f2; font-size:15px; line-height:1.7; }
.ferry-route-primary { position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; margin-top:19px; padding:11px 15px; border-radius:999px; background:#fff; color:#087482; font-size:13px; font-weight:800; text-decoration:none; }
.ferry-route-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0!important; }
.ferry-route-facts article { min-width:0; padding:17px; border:1px solid #e0e9e9; border-radius:15px; background:linear-gradient(140deg,#fff,#f4f9fa); }
.ferry-route-facts article span { display:block; margin-bottom:5px; color:#74878e; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.ferry-route-facts article strong { display:block; color:#1a4354; font-size:15px; line-height:1.45; }
.ferry-route-note { display:flex; gap:12px; margin:0 0 20px; padding:14px 16px; border:1px solid #e9dfc6; border-radius:14px; background:#fffaf0; color:#715f37; }
.ferry-route-note > span { flex:none; color:#a27a24; font-size:19px; }
.ferry-route-note p { margin:0; font-size:13px; line-height:1.6; }
.ferry-route-content { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr); gap:14px; }
.ferry-route-content > div,.ferry-route-content > aside,.ferry-route-faq,.ferry-route-more { padding:20px; border:1px solid #e2eaea; border-radius:17px; background:#fff; box-shadow:0 7px 22px #173b4a08; }
.ferry-route-content h2,.ferry-route-faq h2,.ferry-route-more h2 { margin:0 0 10px; color:#153e50; font-size:20px; line-height:1.25; }
.ferry-route-content h2:not(:first-of-type) { margin-top:22px; }
.ferry-route-content p,.ferry-route-content li,.ferry-route-content aside p { color:#5f747d; font-size:13px; line-height:1.7; }
.ferry-route-content ul { display:grid; gap:9px; margin:0; padding-left:20px; }
.ferry-route-content aside { background:#f5faf9; }
.ferry-route-content aside > a { display:block; margin-top:9px; color:#087f8c; font-size:12px; font-weight:750; text-decoration:none; }
.ferry-route-faq,.ferry-route-more { margin-top:14px; }
.ferry-route-faq details { padding:12px 0; border-top:1px solid #e9eeee; }
.ferry-route-faq summary { color:#284d59; font-size:14px; font-weight:750; cursor:pointer; }
.ferry-route-faq details p { margin:8px 0 0; color:#62767e; font-size:13px; line-height:1.65; }
.ferry-route-more { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ferry-route-more h2 { flex:0 0 100%; }
.ferry-route-more a { display:flex; justify-content:space-between; gap:12px; flex:1 1 220px; padding:12px; border:1px solid #e2eceb; border-radius:11px; color:#087f8c; font-size:13px; font-weight:750; text-decoration:none; }
@media(max-width:760px) {
  html body main#icerik .ferry-route-page { padding:12px 14px 32px; }
  .ferry-route-hero { padding:25px 20px; border-radius:18px; }
  .ferry-route-facts,.ferry-route-content { grid-template-columns:1fr; gap:9px; }
  .ferry-route-facts article,.ferry-route-content > div,.ferry-route-content > aside,.ferry-route-faq,.ferry-route-more { padding:15px; }
  .ferry-route-content h2,.ferry-route-faq h2,.ferry-route-more h2 { font-size:18px; }
}