/* =====================================================
   Global Optimals — Blog Article Shared Stylesheet
   blog-article.css  |  v2.0  |  2026
   Mobile-first · Cross-browser · A11y-ready
   ===================================================== */

/* ── CSS Custom Properties ── */
:root{
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bg:#f8f9fa;
  --card:#fff;
  --accent:#001f3f;
  --green:#60bb52;
  --border:#e5e7eb;
  --text:#0a0c0f;
  --muted:#6b7280;
  --radius:8px;
  --shadow:0 2px 12px rgba(0,0,0,.07);
  --transition:.2s ease;
}

/* ── Reset ── */
*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  font-size:16px;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Prevent iOS zoom on inputs */
input,select,textarea{font-size:16px}

/* ── Nav ── */
nav{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:100;
  /* backdrop-filter fallback for browsers without support */
  background:rgba(248,249,250,.97);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.nav-container{
  width:100%;
  max-width:1200px;
  padding:1rem 1.5rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  gap:1.5rem;
}
.logo img{height:32px;width:auto}
.nav-links{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  gap:1.4rem;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
  white-space:nowrap;
  /* Min tap target */
  padding:.4rem 0;
}
.nav-links a:hover,.nav-links a:focus{color:var(--text);outline:none}
@-webkit-keyframes btnShimmer{to{background-position:200% center}}
@keyframes btnShimmer{to{background-position:200% center}}
.nav-cta{
  padding:.8rem 1.6rem;
  background:-webkit-linear-gradient(left,#003d69 0%,#60bb52 50%,#003d69 100%);
  background:linear-gradient(to right,#003d69 0%,#60bb52 50%,#003d69 100%);
  background-size:200% auto;
  -webkit-animation:btnShimmer 5s linear infinite;
  animation:btnShimmer 5s linear infinite;
  color:#fff;
  border:none;
  border-radius:4px;
  font-size:.65rem;
  font-weight:600;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.05em;
  -webkit-transition:all .3s;
  transition:all .3s;
  white-space:nowrap;
  /* min tap target 44px */
  min-height:44px;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
.nav-cta:hover,.nav-cta:focus{
  -webkit-transform:translateY(-2px);
  transform:translateY(-2px);
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.1);
  box-shadow:0 10px 20px rgba(0,0,0,.1);
  outline:none;
}
.nav-actions{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  gap:.8rem;
}
.lang-switch{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  gap:.3rem;
  border-right:1px solid var(--border);
  padding-right:.8rem;
}
.lang-switch a{
  text-decoration:none;
  font-size:.65rem;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.35rem .45rem;
  border-radius:3px;
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
  /* min tap target */
  min-height:36px;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
.lang-switch a.active{color:var(--accent);background:rgba(0,31,63,.08)}
.lang-switch a:hover,.lang-switch a:focus{color:var(--text);outline:none}

/* ── Article layout ── */
.article-page{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem 4rem}

/* ── Breadcrumb ── */
.breadcrumb{
  font-size:.72rem;
  color:var(--muted);
  margin-bottom:1.5rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  gap:.2rem;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
.breadcrumb a{color:var(--muted);text-decoration:none;-webkit-transition:color var(--transition);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{margin:0 .2rem;opacity:.5}

/* ── Article header ── */
.article-header{margin-bottom:2rem}
.article-category{
  display:inline-block;
  background:rgba(96,187,82,.12);
  color:var(--green);
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.28rem .75rem;
  border-radius:4px;
  margin-bottom:.9rem;
}
.article-header h1{
  font-size:clamp(1.5rem,5vw,2.2rem);
  font-weight:900;
  color:var(--text);
  line-height:1.2;
  margin-bottom:.9rem;
  word-break:break-word;
  overflow-wrap:break-word;
}
.article-meta{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  gap:1rem;
  font-size:.75rem;
  color:var(--muted);
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.article-meta span{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  gap:.3rem;
}

/* ── Snippet box ── */
.snippet-box{
  background:-webkit-linear-gradient(315deg,#e8f4fd,#f0fbee);
  background:linear-gradient(135deg,#e8f4fd,#f0fbee);
  border-left:4px solid var(--green);
  padding:1.1rem 1.3rem;
  border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:2rem;
  font-size:.93rem;
  line-height:1.65;
}
.snippet-box strong{color:var(--accent)}

/* ── Article body ── */
.article-body h2{
  font-size:1.2rem;
  font-weight:800;
  color:var(--text);
  margin:2.2rem 0 .9rem;
  padding-bottom:.45rem;
  border-bottom:2px solid var(--border);
}
.article-body h3{
  font-size:1rem;
  font-weight:700;
  color:var(--accent);
  margin:1.6rem 0 .55rem;
}
.article-body p{margin-bottom:.9rem;font-size:.94rem}
.article-body ul,.article-body ol{padding-left:1.4rem;margin-bottom:.9rem}
.article-body li{margin-bottom:.4rem;font-size:.92rem}
.article-body strong{color:var(--text)}

/* ── Tables ── */
.table-wrap{
  overflow-x:auto;
  margin:1.4rem 0;
  -webkit-overflow-scrolling:touch;
  /* subtle shadow hint there's more to scroll */
  border-radius:var(--radius);
  -webkit-box-shadow:var(--shadow);
  box-shadow:var(--shadow);
}
table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:320px}
thead th{
  background:var(--accent);
  color:#fff;
  padding:.6rem .9rem;
  text-align:left;
  font-weight:700;
  white-space:nowrap;
}
tbody td{padding:.55rem .9rem;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:#f8fafc}
tbody tr:hover td{background:#f0f7ff}
.badge-green{color:var(--green);font-weight:700}
.badge-red{color:#e74c3c;font-weight:700}
.badge-accent{color:var(--accent);font-weight:700}

/* ── FAQ ── */
.faq-section{margin-top:2.5rem}
.faq-section h2{
  font-size:1.2rem;
  font-weight:800;
  margin-bottom:1.3rem;
  padding-bottom:.45rem;
  border-bottom:2px solid var(--border);
}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:.65rem;
  overflow:hidden;
}
.faq-q{
  padding:.9rem 1.1rem;
  font-weight:700;
  font-size:.87rem;
  cursor:pointer;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  gap:1rem;
  background:var(--card);
  -webkit-transition:background var(--transition);
  transition:background var(--transition);
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  /* Larger tap target on mobile */
  min-height:52px;
  line-height:1.4;
  -webkit-tap-highlight-color:transparent;
}
.faq-q:hover,.faq-q:focus{background:#f0f7ff;outline:none}
.faq-q .icon{
  font-size:.75rem;
  color:var(--muted);
  -webkit-transition:-webkit-transform .3s ease;
  transition:transform .3s ease;
  -ms-flex-negative:0;
  flex-shrink:0;
}
.faq-a{
  max-height:0;
  overflow:hidden;
  -webkit-transition:max-height .4s ease,padding .3s ease;
  transition:max-height .4s ease,padding .3s ease;
  font-size:.87rem;
  color:var(--muted);
  line-height:1.65;
}
.faq-item.open .faq-a{max-height:600px;padding:.8rem 1.1rem 1.1rem}
.faq-item.open .faq-q .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

/* ── CTA box ── */
.cta-box{
  background:var(--accent);
  color:#fff;
  border-radius:12px;
  padding:1.8rem 2rem;
  margin-top:2.5rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  gap:1.2rem;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.cta-box h3{font-size:1rem;font-weight:800;margin-bottom:.25rem}
.cta-box p{font-size:.83rem;opacity:.8}
.cta-btn{
  background:var(--green);
  color:#fff;
  padding:.8rem 1.6rem;
  border-radius:6px;
  font-weight:700;
  font-size:.83rem;
  text-decoration:none;
  white-space:nowrap;
  -webkit-transition:background var(--transition);
  transition:background var(--transition);
  min-height:44px;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.cta-btn:hover,.cta-btn:focus{background:#4da043;outline:none}

/* ── Contact section ── */
.blog-contact{background:#001f3f;color:#fff;padding:4rem 1.5rem}
.bc-inner{
  max-width:1200px;
  margin:0 auto;
  display:-ms-grid;
  display:grid;
  -ms-grid-columns:1fr 4rem 1fr;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  -webkit-box-align:start;
  -ms-flex-align:start;
  align-items:start;
}
.bc-title{
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:500;
  line-height:1.2;
  margin-bottom:1.3rem;
}
.bc-social{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:.8rem;
}
.bc-social a{
  padding:.7rem 1.2rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:4px;
  color:#fff;
  text-decoration:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.bc-social a:hover,.bc-social a:focus{background:#fff;color:#001f3f;outline:none}
.bc-group{margin-bottom:1.8rem}
.bc-group h4{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  margin-bottom:.7rem;
}
.bc-row{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  gap:.8rem;
  margin-bottom:.65rem;
}
.bc-row .ic{
  color:#60bb52;
  font-size:1.2rem;
  text-decoration:none;
  -webkit-transition:-webkit-transform var(--transition);
  transition:transform var(--transition);
  min-width:24px;
  min-height:44px;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
.bc-row .ic:hover{-webkit-transform:scale(1.15);transform:scale(1.15)}
.bc-row .ph{
  color:#fff;
  text-decoration:none;
  font-size:.93rem;
  font-weight:500;
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
}
.bc-row .ph:hover{color:#60bb52}

/* ── Related articles (ichki linklar) ── */
.related-articles{max-width:820px;margin:0 auto;padding:0 2rem 3rem}
.related-articles h2{
  font-size:1.1rem;font-weight:800;color:var(--text);
  margin-bottom:1rem;padding-bottom:.45rem;border-bottom:2px solid var(--border);
}
.related-articles ul{list-style:none;padding:0;margin:0}
.related-articles li{margin-bottom:.65rem;padding-left:1.2rem;position:relative}
.related-articles li::before{content:'→';position:absolute;left:0;color:var(--green);font-weight:700}
.related-articles a{
  color:var(--accent);font-weight:600;font-size:.92rem;text-decoration:none;
  -webkit-transition:color var(--transition);transition:color var(--transition);
}
.related-articles a:hover{color:var(--green);text-decoration:underline}
@media(max-width:768px){.related-articles{padding:0 1rem 2.5rem}}

/* ── Footer ── */
footer{
  background:#0a0c0f;
  color:rgba(255,255,255,.4);
  padding:1.8rem 1.5rem;
  text-align:center;
  font-size:.78rem;
  line-height:1.8;
}
footer a{color:var(--green);text-decoration:none}

/* ── Keyframe Animations ── */
@-webkit-keyframes shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
@keyframes shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
@-webkit-keyframes fadeIn{
  from{opacity:0;-webkit-transform:translateY(18px);transform:translateY(18px)}
  to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Shimmer effects ── */
.shimmer-h1{
  background:-webkit-linear-gradient(left,var(--text) 0%,var(--text) 35%,#60bb52 50%,var(--text) 65%,var(--text) 100%);
  background:linear-gradient(90deg,var(--text) 0%,var(--text) 35%,#60bb52 50%,var(--text) 65%,var(--text) 100%);
  background-size:800px 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--text); /* fallback */
  -webkit-animation:shimmer 4s linear infinite;
  animation:shimmer 4s linear infinite;
}
.shimmer-text-light{
  background:-webkit-linear-gradient(left,#fff 0%,#fff 35%,#a3e899 50%,#fff 65%,#fff 100%);
  background:linear-gradient(90deg,#fff 0%,#fff 35%,#a3e899 50%,#fff 65%,#fff 100%);
  background-size:800px 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#fff; /* fallback */
  -webkit-animation:shimmer 4s linear infinite;
  animation:shimmer 4s linear infinite;
}

/* ── Entry animations ── */
.anim-d0{-webkit-animation:fadeIn .7s ease both;animation:fadeIn .7s ease both}
.anim-d1{-webkit-animation:fadeIn .7s .15s ease both;animation:fadeIn .7s .15s ease both}
.anim-d2{-webkit-animation:fadeIn .7s .3s ease both;animation:fadeIn .7s .3s ease both}

/* ── Scroll fade-up ── */
.fade-up{
  opacity:0;
  -webkit-transform:translateY(24px);
  transform:translateY(24px);
  -webkit-transition:opacity .6s ease,-webkit-transform .6s ease;
  transition:opacity .6s ease,transform .6s ease;
  will-change:opacity,transform;
}
.fade-up.visible{
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0);
  will-change:auto;
}

/* ── Focus visible (keyboard nav) ── */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    -webkit-animation-duration:.01ms !important;
    animation-duration:.01ms !important;
    -webkit-animation-iteration-count:1 !important;
    animation-iteration-count:1 !important;
    -webkit-transition-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .fade-up{opacity:1;-webkit-transform:none;transform:none}
  .shimmer-h1,.shimmer-text-light{-webkit-animation:none;animation:none}
}

/* ══════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media(max-width:1024px){
  .nav-container{padding:1rem 1.5rem}
  .nav-links{gap:1rem}
  .bc-inner{gap:2.5rem}
}

/* ── Mobile landscape / small tablet (≤768px) ── */
@media(max-width:768px){
  /* Nav */
  .nav-links{display:none}
  .nav-container{padding:.9rem 1.2rem;gap:1rem}
  .lang-switch{padding-right:.6rem;gap:.2rem}

  /* Article */
  .article-page{padding:1.8rem 1rem 3rem}
  .article-header h1{font-size:clamp(1.35rem,5vw,1.8rem)}
  .article-body h2{font-size:1.1rem;margin:1.8rem 0 .8rem}
  .article-body h3{font-size:.97rem}
  .article-body p,.article-body li{font-size:.9rem}

  /* Snippet */
  .snippet-box{padding:.9rem 1rem;font-size:.88rem}

  /* Tables — enable horizontal scroll */
  .table-wrap{
    position:relative;
    margin-left:-1rem;
    margin-right:-1rem;
    border-radius:0;
    -webkit-box-shadow:none;
    box-shadow:none;
  }
  .table-wrap::after{
    content:'';
    position:absolute;
    right:0;top:0;bottom:0;
    width:2rem;
    background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.9));
    background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.9));
    pointer-events:none;
  }
  table{font-size:.76rem}
  thead th{padding:.5rem .7rem}
  tbody td{padding:.45rem .7rem}

  /* FAQ */
  .faq-q{font-size:.84rem;padding:.85rem 1rem}

  /* CTA */
  .cta-box{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    padding:1.4rem 1.2rem;
    gap:1rem;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
  }
  .cta-btn{width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

  /* Contact */
  .blog-contact{padding:3rem 1.2rem}
  .bc-inner{
    grid-template-columns:1fr;
    -ms-grid-columns:1fr;
    gap:2rem;
  }
  .bc-title{font-size:clamp(1.6rem,5vw,2.2rem)}
  .bc-social{gap:.6rem}
  .bc-social a{font-size:.82rem;padding:.65rem 1rem}
}

/* ── Small mobile (≤480px) ── */
@media(max-width:480px){
  /* Tighter nav */
  .nav-cta{padding:.55rem 1rem;font-size:.6rem}
  .lang-switch a{font-size:.6rem;padding:.3rem .35rem}

  /* Article */
  .article-page{padding:1.4rem .9rem 2.5rem}
  .article-category{font-size:.6rem}
  .article-meta{gap:.6rem;font-size:.7rem}

  /* Breadcrumb — truncate long paths */
  .breadcrumb{font-size:.68rem}

  /* Tables: smaller font */
  table{font-size:.72rem}

  /* CTA */
  .cta-box{padding:1.2rem 1rem}
  .cta-box h3{font-size:.93rem}

  /* Contact */
  .blog-contact{padding:2.5rem 1rem}
  .bc-social{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
  .bc-social a{width:100%}
}

/* ── Print ── */
@media print{
  nav,footer,.cta-box,.blog-contact{display:none}
  .article-page{padding:0;max-width:100%}
  .fade-up{opacity:1;-webkit-transform:none;transform:none}
  a[href]::after{content:" ("attr(href)")";font-size:.75em;color:#666}
  a[href^="#"]::after,a[href^="tel:"]::after{content:""}
  .table-wrap{overflow:visible;-webkit-box-shadow:none;box-shadow:none}
}