/* ==========================================================================
   KasaGo — shared component styles
   Extracted verbatim from the approved prototypes
   KASAGO_BLOG_INDEX_v3.html + KASAGO_BLOG_POST_v3.html (canon §13.3).
   Requires tokens.css. Zero inline styles in production (canon §13.5).
   ========================================================================== */

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0; overflow-x:clip}
html{scroll-behavior:smooth}
body{font:16px/1.5 var(--font); color:var(--ink); background:#fff;}
button{font-family:inherit}
svg{display:block}
a{color:inherit}
img{max-width:100%}
[id]{scroll-margin-top:90px}
:focus-visible{outline:3px solid var(--purple); outline-offset:3px; border-radius:8px;}

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:#fff; color:var(--purple-700);
  font-weight:600; padding:10px 16px; border-radius:0 0 12px 0;}
.skip:focus{left:0}

.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

/* ---------- header — home/landing 1:1 ---------- */
.bar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
     -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.bar-in{max-width:1200px; margin:0 auto; padding:0 20px; height:70px; display:flex; align-items:center; gap:10px;}
.logo{display:inline-flex; align-items:center; flex:none; text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.2px;}
.logo .kasa{color:var(--purple)} .logo .go{color:var(--gray-600)}
/* wordmark image replaces the text logo (header + footer) */
.logo .logomark,.flogo .logomark{display:block; height:40px; width:auto;}
.navlinks{display:flex; align-items:center; gap:2px; margin-left:auto;}
.nlink, .ddbtn{display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 14px; border-radius:12px;
  color:var(--ink); font-weight:500; font-size:15px; text-decoration:none; background:none; border:none; cursor:pointer;
  transition:background .18s var(--ease);}
.nlink:hover, .ddbtn:hover{background:var(--purple-50)}
.nlink[aria-current="page"]{background:var(--purple-50); color:var(--purple-700); font-weight:600;}
.nlink svg{opacity:.7}
.ddbtn svg{opacity:.6; transition:transform .18s var(--ease)}
.dd{position:relative}
.dd.open .ddbtn svg{transform:rotate(180deg)}
.ddpanel{position:absolute; top:100%; right:0; padding-top:12px; display:none; z-index:60;}
.dd.open .ddpanel{display:block}
.ddcard{background:#fff; border:1px solid var(--gray-200); border-radius:18px; padding:10px;
  width:min(580px,92vw); box-shadow:0 24px 50px -24px rgba(15,23,42,.28); animation:fadeUp .22s var(--ease);}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.ddhead{padding:6px 10px 10px; font-size:12px; font-weight:600; color:var(--gray-600);}
.ddgrid{display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.dditem{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; text-decoration:none;
  transition:background .18s var(--ease);}
.dditem:hover{background:var(--purple-50)}
.dtile{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:var(--it); color:var(--ic);}
.dtxt{display:flex; flex-direction:column; gap:2px;}
.dtxt b{font-weight:600; font-size:15px; color:var(--ink);}
.dtxt span{font-size:13px; color:var(--gray-600); line-height:1.35;}
a.buy{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; margin-left:8px;
  border-radius:999px; background:var(--purple); color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  white-space:nowrap; box-shadow:0 10px 20px -12px rgba(115,88,196,.6);
  transition:background .18s var(--ease), transform .2s var(--ease);}
a.buy:hover{background:var(--purple-700); transform:translateY(-1px)}
.menubtn{display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--gray-200); border-radius:12px;
  background:#fff; color:var(--ink); cursor:pointer;}
.mpanel{display:none; border-top:1px solid var(--line); background:#fff; padding:10px 20px 22px;
  max-height:calc(100vh - 70px); overflow-y:auto;}
.mpanel .mlink{display:flex; align-items:center; gap:10px; height:52px; padding:0 8px; border-radius:12px;
  color:var(--ink); font-weight:600; font-size:17px; text-decoration:none;}
.mpanel .mlink svg{opacity:.7}
.msolbtn{width:100%; display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 8px;
  border-radius:12px; background:none; border:none; color:var(--ink); font-weight:600; font-size:17px; cursor:pointer;}
.msolbtn svg{opacity:.6; transition:transform .18s var(--ease)}
.msolbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.msol{display:none; flex-direction:column; gap:2px; padding:2px 0 8px 8px;}
.msol.open{display:flex}
.msol a{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; text-decoration:none;}
a.mbuy{display:flex; align-items:center; justify-content:center; height:52px; margin-top:10px; border-radius:999px;
  background:var(--purple); color:#fff; font-weight:600; font-size:16px; text-decoration:none;}
@media (max-width:899px){
  .navlinks{display:none}
  .menubtn{display:grid; place-items:center}
  .bar.open .mpanel{display:block}
}

/* ---------- section head ---------- */
.sec-head{max-width:680px; margin:0 auto 36px; text-align:center;}
.eyebrow2{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--gray-600);
  background:#EFF4F9; border:1px solid #DFE9F2; padding:6px 12px; border-radius:999px; margin-bottom:16px;}
.sec-head h2{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1.16;
  margin:0; letter-spacing:-.5px;}

/* ---------- branded image slot (used only where no real image exists) ---------- */
.ph{position:relative; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(120% 150% at 88% 8%, rgba(119,155,191,.16), transparent 52%),
             radial-gradient(140% 160% at 8% 95%, rgba(115,88,196,.17), transparent 55%),
             linear-gradient(135deg,#F7F4FC 0%,#F3F6FA 100%);}
.ph .tile{width:52px; height:52px; border-radius:16px; background:#fff; color:var(--ic,var(--purple-700));
  display:grid; place-items:center; box-shadow:0 12px 26px -12px rgba(30,22,70,.22);}

/* ==========================================================================
   /blog — hub
   ========================================================================== */

.bhead{background:linear-gradient(180deg,var(--purple-50) 0%,#FBFAFE 62%,#fff 100%); padding:26px 0 30px;}
.bh-in{max-width:920px; margin:0 auto; padding:0 20px;}
.bh-sub{color:var(--gray-600); font-size:16.5px; line-height:1.6; margin:0; max-width:56ch;}

.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-600); margin-bottom:16px; flex-wrap:wrap;}
.crumbs a{color:var(--gray-600); text-decoration:none}
.crumbs a:hover{color:var(--purple-700)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink); font-weight:600}

h1{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,38px); line-height:1.12;
  margin:0 0 10px; letter-spacing:-.7px;}

/* post cards — single column */
.list{max-width:920px; margin:0 auto; padding:26px 20px 0; display:flex; flex-direction:column; gap:14px;}
.pcard{display:flex; gap:22px; background:#fff; border:1px solid var(--gray-200); border-radius:18px;
  padding:16px; text-decoration:none; align-items:stretch;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);}
.pcard:hover{transform:translateY(-3px); border-color:#DCD4F0; box-shadow:0 24px 44px -30px rgba(30,22,70,.22);}
.pcard:hover h2{color:var(--purple-700)}
.pthumb{width:218px; flex:none; aspect-ratio:16/10; border-radius:12px;}
/* real covers are wide banners with the headline on the left; anchoring the crop
   to the right keeps the product in frame and never slices a word in half */
img.pthumb{display:block; height:auto; align-self:center; object-fit:cover;
  object-position:right center; background:var(--gray-50);}
.pbody{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:6px 6px 6px 0;}
.prow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px;}
.crown{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px;
  background:#FEF5E7; color:#B45309; font-size:11.5px; font-weight:700;}
.pcard h2{font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.3;
  margin:0 0 7px; letter-spacing:-.4px; color:var(--ink); transition:color .18s var(--ease);}
.pcard p{margin:0 0 10px; color:var(--gray-600); font-size:14.5px; line-height:1.6;}
@media(max-width:680px){
  .pcard{gap:14px; padding:12px; border-radius:16px;}
  .pthumb{width:106px; aspect-ratio:1/1; border-radius:10px;}
  .pthumb .tile{width:38px; height:38px; border-radius:12px;}
  .pthumb .tile svg{width:18px; height:18px;}
  .pbody{padding:2px 2px 2px 0}
  .pcard h2{font-size:16.5px; margin-bottom:5px}
  .pcard p{font-size:13.5px; margin-bottom:7px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pmeta{font-size:11.5px}
}

/* ==========================================================================
   /blog/<post> — article
   ========================================================================== */

.phead{background:linear-gradient(180deg,var(--purple-50) 0%,#FBFAFE 62%,#fff 100%); padding:24px 0 26px;}
.ph-in{max-width:800px; margin:0 auto; padding:0 20px;}
.phead h1{font-size:clamp(28px,3.6vw,40px); line-height:1.13; margin:14px 0 12px; letter-spacing:-.8px;}
.cat{display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:999px;
  background:var(--cb,var(--purple-50)); color:var(--cc,var(--purple-700)); font-size:12px; font-weight:700; text-decoration:none;}
.deck{color:var(--gray-600); font-size:17.5px; line-height:1.6; margin:0 0 16px; max-width:58ch;}
.pmeta{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--gray-600);}
.pmeta .mi{display:inline-flex; align-items:center; gap:6px;}
.pmeta svg{color:var(--slate-600); flex:none}
.pmeta .msep{opacity:.45}

/* hub cards reuse .cat at a slightly smaller size */
.pcard .cat{height:24px; padding:0 10px; gap:6px; font-size:11.5px;}
.list .pmeta{gap:7px; font-size:12.5px;}
.list .pmeta .mi{gap:5px}

.art{max-width:800px; margin:0 auto; padding:26px 20px 0;}

/* cover — real image, rounded 20px */
/* height:auto is required: the width/height attributes (there for CLS) are definite,
   and a definite height makes the browser ignore aspect-ratio. */
img.cover{display:block; width:100%; height:auto; aspect-ratio:2.1/1; object-fit:cover;
  border-radius:20px; margin:0 0 30px; background:var(--gray-50);}
.ph.cover{aspect-ratio:2.1/1; border-radius:20px; margin:0 0 30px;}
.ph.cover .tile{width:56px; height:56px; border-radius:17px;}

/* in-article figures — real illustrations framed on the branded ground */
figure{margin:0 0 30px}
.figframe{display:grid; place-items:center; padding:18px; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 150% at 88% 8%, rgba(119,155,191,.16), transparent 52%),
             radial-gradient(140% 160% at 8% 95%, rgba(115,88,196,.17), transparent 55%),
             linear-gradient(135deg,#F7F4FC 0%,#F3F6FA 100%);}
.figframe img{display:block; width:auto; max-width:100%; height:auto; border-radius:12px;}
figure .ph{aspect-ratio:16/9; border-radius:16px;}
figcaption{margin-top:11px; font-size:13.5px; color:var(--gray-600); text-align:center;}

/* kısa cevap (AEO çekirdeği) */
.answer{background:linear-gradient(180deg,#F8F6FD,#FDFCFE); border:1px solid var(--purple-100);
  border-radius:18px; padding:22px 24px; margin:0 0 26px;}
.answer .alab{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--purple-700); background:#fff;
  border:1px solid var(--purple-100); padding:5px 11px; border-radius:999px; margin-bottom:12px;}
.answer p{margin:0; font-size:17px; line-height:1.7; color:var(--ink);}

/* içindekiler — numaralı */
.toc{background:var(--gray-50); border:1px solid var(--gray-200); border-radius:18px;
  padding:20px 24px 22px; margin:0 0 42px;}
.toc .lab{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-600); display:block; margin-bottom:13px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t; columns:2; column-gap:34px;}
@media(max-width:640px){ .toc ol{columns:1} }
.toc li{counter-increment:t; position:relative; padding-left:25px; margin-bottom:9px; break-inside:avoid;}
.toc li::before{content:counter(t); position:absolute; left:0; top:1px; width:18px; text-align:right;
  font-size:12px; font-weight:700; color:var(--purple); opacity:.65;}
.toc a{font-size:14.5px; line-height:1.5; color:var(--read); text-decoration:none;}
.toc a:hover{color:var(--purple-700); text-decoration:underline; text-underline-offset:3px;}

/* gövde */
.body{max-width:760px;}
.body p{color:var(--read); font-size:17.5px; line-height:1.8; margin:0 0 22px;}
.body a{color:var(--purple-700); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:rgba(92,68,166,.32);}
.body a:hover{text-decoration-color:var(--purple-700)}
.body h2{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.5vw,27px); line-height:1.24;
  letter-spacing:-.5px; margin:50px 0 16px;}
.body h3{font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.32;
  letter-spacing:-.3px; margin:32px 0 10px;}
.body ul{margin:0 0 22px; padding:0; list-style:none}
.body ul li{position:relative; padding-left:26px; margin-bottom:10px; color:var(--read); font-size:17px; line-height:1.72;}
.body ul li::before{content:""; position:absolute; left:7px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--purple); opacity:.55;}
.body strong{font-weight:650; color:var(--ink)}

/* adımlar — mor rozetler */
.steps{margin:0 0 28px; padding:0; list-style:none; counter-reset:st;}
.steps li{counter-increment:st; position:relative; padding:0 0 22px 50px; margin:0; font-size:17px; line-height:1.7; color:var(--read);}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(st); position:absolute; left:0; top:0; width:33px; height:33px;
  border-radius:11px; background:var(--purple); color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:14.5px; display:grid; place-items:center;}
.steps li::after{content:""; position:absolute; left:16px; top:41px; bottom:4px; width:1.5px; background:var(--gray-200);}
.steps li:last-child::after{display:none}
.steps b{display:block; font-family:var(--font-display); font-size:16.5px; font-weight:600; margin-bottom:4px; color:var(--ink);}

/* not / ipucu */
.tip{display:flex; gap:13px; background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:16px; padding:16px 18px; margin:0 0 26px;}
.tip.green{background:var(--success-bg); border-color:var(--success-line);}
.tip .tic{width:34px; height:34px; border-radius:11px; background:#fff; color:var(--purple-700);
  display:grid; place-items:center; flex:none; border:1px solid var(--gray-200);}
.tip.green .tic{color:var(--success-ink); border-color:var(--success-line)}
.tip b{display:block; font-family:var(--font-display); font-size:14.5px; font-weight:600; margin-bottom:4px; color:var(--ink);}
.tip p{margin:0 !important; font-size:15.5px !important; line-height:1.65 !important; color:var(--gray-600) !important;}

/* tablo */
.tablewrap{margin:0 0 12px; border:1px solid var(--gray-200); border-radius:16px; overflow:hidden;}
.tablescroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px;}
thead th{background:var(--gray-50); text-align:left; font-weight:700; font-size:12.5px; letter-spacing:.02em;
  color:var(--gray-600); padding:12px 16px; border-bottom:1px solid var(--gray-200); white-space:nowrap;}
tbody td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--read);}
tbody td:first-child{font-weight:600; color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
tbody tr.best{background:var(--purple-50)}
tbody tr.best td:first-child{color:var(--purple-700)}
.tnote{font-size:13.5px; color:var(--gray-600); margin:0 0 28px;}

/* makale içi CTA */
.inlinecta{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:20px;
  background:var(--ink); border-radius:18px; padding:22px 24px; margin:34px 0;}
.inlinecta::before{content:""; position:absolute; width:300px; height:240px; right:-6%; top:-50%;
  border-radius:50%; filter:blur(58px); background:rgba(115,88,196,.55); z-index:-1;}
.inlinecta b{display:block; font-family:var(--font-display); font-size:17px; font-weight:600; color:#fff;
  margin-bottom:5px; letter-spacing:-.2px;}
.inlinecta span{display:block; font-size:14px; line-height:1.6; color:rgba(255,255,255,.72);}
.inlinecta .itx{flex:1; min-width:0}
a.mini{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:999px;
  background:var(--purple); color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  white-space:nowrap; flex:none; transition:background .18s var(--ease);}
a.mini:hover{background:#8A72D4}
@media(max-width:600px){ .inlinecta{flex-direction:column; align-items:flex-start; gap:14px} a.mini{width:100%; justify-content:center} }

.soon{display:inline-block; font-size:11.5px; font-weight:700; color:var(--purple-700);
  background:var(--purple-50); border:1px solid var(--purple-100); padding:2px 9px; border-radius:999px; vertical-align:middle;}

/* SSS — akordeon */
.faq{display:flex; flex-direction:column; gap:10px; margin:0 0 8px;}
.faq details{background:var(--gray-50); border:1px solid var(--gray-200); border-radius:16px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);}
.faq details[open]{border-color:#DCD4F0; box-shadow:0 18px 36px -26px rgba(30,22,70,.18);}
.faq summary{cursor:pointer; padding:16px 18px; font-weight:600; font-size:15.5px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:12px; list-style:none;}
.faq summary::-webkit-details-marker{display:none}
.fplus{width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:var(--purple-50); color:var(--purple-700); font-weight:700; transition:transform .25s var(--ease);}
.faq details[open] .fplus{transform:rotate(45deg)}
.faq .ans{padding:0 18px 16px; color:var(--gray-600); font-size:15px; line-height:1.7;}
.faq .ans p{margin:0 0 12px; font-size:15px; line-height:1.7; color:var(--gray-600)}
.faq .ans p:last-child{margin-bottom:0}

.updated{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:36px; padding:18px 0 0; font-size:13.5px; color:var(--gray-600);}
.updated a{color:var(--purple-700); text-decoration:none; border-bottom:1px solid var(--purple-100)}

/* ---------- ilgili yazılar + ürün sayfaları ---------- */
.related{background:var(--gray-50); padding:60px 20px 66px; margin-top:60px;}
.rl-in{max-width:1120px; margin:0 auto;}
.rposts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px;}
@media(max-width:1020px){ .rposts{grid-template-columns:1fr 1fr; max-width:700px; margin-inline:auto; margin-bottom:14px;} }
@media(max-width:540px){ .rposts{grid-template-columns:1fr; max-width:520px;} }
.rpost{display:flex; flex-direction:column; background:#fff; border:1px solid var(--gray-200);
  border-radius:16px; padding:11px; text-decoration:none;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);}
.rpost:hover{transform:translateY(-3px); border-color:#DCD4F0; box-shadow:0 20px 38px -28px rgba(30,22,70,.2);}
.rpost:hover b{color:var(--purple-700)}
.rthumb{width:100%; aspect-ratio:16/10; border-radius:11px;}
img.rthumb{display:block; height:auto; object-fit:cover; object-position:right center; background:var(--gray-50);}
.rthumb .tile{width:42px; height:42px; border-radius:13px;}
.rthumb .tile svg{width:20px; height:20px}
.rtx{display:flex; flex-direction:column; gap:7px; padding:12px 7px 6px; flex:1;}
.rcat{align-self:flex-start; display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:999px; background:var(--cb,var(--purple-50)); color:var(--cc,var(--purple-700));
  font-size:11px; font-weight:700;}
.rtx b{display:block; font-family:var(--font-display); font-weight:600; font-size:14.5px; line-height:1.35;
  color:var(--ink); letter-spacing:-.2px; transition:color .18s var(--ease);}
.rmeta2{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gray-600); margin-top:auto;}
.rmeta2 svg{color:var(--slate-600); width:12px; height:12px; flex:none}
.rmeta2 .msep{opacity:.45}

.rlgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media(max-width:940px){ .rlgrid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .rlgrid{grid-template-columns:1fr; max-width:520px; margin-inline:auto} }
.rlcard{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--gray-200);
  border-radius:14px; padding:13px 15px; text-decoration:none;
  transition:transform .2s var(--ease), border-color .2s var(--ease);}
.rlcard:hover{transform:translateY(-2px); border-color:#DCD4F0;}
.rlic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--it,var(--purple-50)); color:var(--ic,var(--purple-700)); flex:none;}
.rltx b{display:block; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink); letter-spacing:-.2px;}
.rltx span{display:block; font-size:12.5px; color:var(--gray-600); margin-top:1px;}
.rlar{color:var(--gray-600); flex:none}

/* hub variant of the related band (3-up product cards, roomier) */
.related--hub{padding:64px 20px 70px; margin-top:64px;}
.related--hub .sec-head{margin-bottom:40px}
.related--hub .rlgrid{grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:860px){ .related--hub .rlgrid{grid-template-columns:1fr; max-width:520px; margin-inline:auto;} }
.related--hub .rlcard{gap:13px; border-radius:16px; padding:16px 18px;}
.related--hub .rlcard:hover{box-shadow:0 18px 34px -26px rgba(30,22,70,.16);}
.related--hub .rlic{width:38px; height:38px; border-radius:11px;}
.related--hub .rltx{flex:1; min-width:0}
.related--hub .rltx b{font-size:15px}
.related--hub .rltx span{font-size:13px}

/* ---------- kapanış CTA ---------- */
.ctaband{padding:64px 20px 84px; background:#fff;}
.ctaband.tight{padding-top:60px}
.cb-in{max-width:1000px; margin:0 auto;}
.cbcard{position:relative; background:var(--ink); border-radius:24px; overflow:hidden; isolation:isolate;
  padding:clamp(40px,5.5vw,62px) clamp(24px,5vw,56px); text-align:center;}
.cbcard::before{content:""; position:absolute; width:480px; height:380px; left:-6%; top:-34%; border-radius:50%;
  filter:blur(70px); background:rgba(115,88,196,.5); z-index:-1;}
.cbcard h2{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,31px); line-height:1.18;
  margin:0 0 12px; letter-spacing:-.5px; color:#fff;}
.cbcard p{margin:0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.6;}
.cbrow{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:26px;}
a.cta{display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 24px; border-radius:999px;
  background:var(--purple); color:#fff; font-weight:600; font-size:16px; text-decoration:none;
  transition:background .2s var(--ease), transform .2s var(--ease);}
a.cta:hover{background:#8A72D4; transform:translateY(-1px)}
.ghostd{display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 22px; border-radius:999px;
  background:transparent; color:#fff; font-weight:600; font-size:16px; border:1px solid rgba(255,255,255,.36);
  text-decoration:none; transition:background .2s var(--ease);}
.ghostd:hover{background:rgba(255,255,255,.12);}
@media(max-width:520px){ .cbrow .cta,.cbrow .ghostd{width:100%; justify-content:center;} }

/* ---------- footer — home 1:1 ---------- */
.site-footer{background:var(--ink); color:#fff; font-size:15px;}
.f-in{max-width:1180px; margin:0 auto; padding:56px 20px 26px;}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px;}
@media (max-width:880px){ .fgrid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .fgrid{grid-template-columns:1fr} }
.flogo{font-family:var(--font-display); font-weight:700; font-size:21px; text-decoration:none; display:inline-flex;}
.flogo .kasa{color:#9F8BDB} .flogo .go{color:#8FB0CE}
.blurb{max-width:340px; margin:16px 0 0; line-height:1.6; font-size:15px; color:rgba(255,255,255,.6);}
.mailchip{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; margin-top:20px;
  border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:600; font-size:14.5px; text-decoration:none; transition:background .2s var(--ease);}
.mailchip:hover{background:rgba(255,255,255,.12)}
.socials{display:flex; gap:10px; margin-top:16px;}
.socials a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.72);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);}
.socials a:hover{color:#fff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.12);}
.ftitle{color:#fff; font-weight:600; font-size:14px; margin:0 0 15px;}
.fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.fcol a{color:rgba(255,255,255,.66); text-decoration:none; transition:color .2s var(--ease);}
.fcol a:hover{color:#fff}
.fcol .plain{color:rgba(255,255,255,.5)}
.fbottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:rgba(255,255,255,.5);}
.fbottom .legal{display:flex; flex-wrap:wrap; gap:20px;}
.fbottom a{color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s var(--ease);}
.fbottom a:hover{color:#fff}
.site-footer :focus-visible{outline-color:#fff}

/* ==========================================================================
   Command #03 (W-50/W-51) — chrome tints, video facade, help center, devices
   ========================================================================== */

/* --- category / product icon tints (canon §9.2 — classes, not inline styles) --- */
.i-cafe{--ic:#8A5A2B;--it:#F5EADC}
.i-restoran{--ic:#B07B3E;--it:#F9F0E2}
.i-adisyon{--ic:#5C44A6;--it:#F4F1FB}
.i-qr{--ic:#3E7CA6;--it:#E4F1F9}
.i-dijital{--ic:#3F8F7A;--it:#E4F3EE}
.i-stok{--ic:#C07A1F;--it:#FBEEDB}
.i-online{--ic:#5F82A6;--it:#EAF1F7}
.i-fiyatlar{--ic:#5C44A6;--it:#F4F1FB}
.i-chart{--ic:#3E7CA6;--it:#E4F1F9}

/* --- .soon badge inside the chrome (dropdown card + mobile panel + footer) --- */
.dtxt .soon{display:inline-block; font-size:11px; font-weight:700; color:var(--purple-700); background:var(--purple-50); border:1px solid var(--purple-100); padding:2px 8px; border-radius:999px; line-height:1.3;}
.site-footer .soon{display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:#CBBEF0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:2px 7px; border-radius:999px; vertical-align:middle;}

/* --- header text links (no leading icons, W-50) + mobile mail + footer trial --- */
.mpanel .mmail{display:flex; align-items:center; min-height:44px; padding:8px; margin-top:4px;
  color:var(--gray-600); font-size:15px; text-decoration:none; word-break:break-all;}
.mpanel .mmail:hover{color:var(--purple-700)}
.msol a{min-height:44px}
.ftrial{margin:18px 0 0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82);}

/* --- footer tap targets ≥40px at 375px (canon §9.8) --- */
.fcol ul{gap:4px}
.fcol li{margin:0}
.fcol li a{display:inline-flex; align-items:center; min-height:40px; line-height:1.3;}

/* --- video facade (canon §11.6, W-51; iframe injected by main.js on click only) --- */
.video{position:relative; margin:22px 0; border-radius:18px; overflow:hidden; aspect-ratio:16/9; background:var(--ink);}
.video[hidden]{display:none}
.video[data-yt=""]{display:none}   /* empty slot reserves no space → no layout shift (F7, §11.6) */
.hshot{aspect-ratio:3/2; min-height:180px; display:grid; place-items:center; text-align:center;}   /* reserve space so nothing moves on load (F7) */
.video .vposter{position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; margin:0; cursor:pointer;
  display:grid; place-items:center;
  background:radial-gradient(120% 140% at 84% 10%, rgba(119,155,191,.22), transparent 55%),
             radial-gradient(140% 150% at 10% 96%, rgba(115,88,196,.30), transparent 58%), var(--ink);}
.video .vposter img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;}
.video .vplay{position:relative; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; box-shadow:0 18px 40px -14px rgba(0,0,0,.5); transition:transform .2s var(--ease);}
.video .vposter:hover .vplay{transform:scale(1.06)}
.video .vplay svg{margin-left:3px; color:var(--purple-700);}
.video .vtitle{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; color:#fff; font-size:14px; text-align:left;
  background:linear-gradient(0deg, rgba(15,23,42,.74), transparent);}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* --- help center: hub + article --- */
.hhub{max-width:1000px; margin:0 auto; padding:6px 20px 0;}
.hgroup{margin:0 0 36px;}
.hgroup > h2{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,24px); margin:0 0 16px; letter-spacing:-.3px;}
.hgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:820px){ .hgrid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .hgrid{grid-template-columns:1fr} }
.hcard{display:block; padding:18px 18px 16px; border:1px solid var(--gray-200); border-radius:16px; background:#fff;
  text-decoration:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);}
.hcard:hover{border-color:#DCD4F0; box-shadow:0 18px 36px -26px rgba(30,22,70,.2); transform:translateY(-2px)}
.hcard b{display:block; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); margin-bottom:5px;}
.hcard span{display:block; font-size:14px; line-height:1.5; color:var(--gray-600);}
.hsteps{margin:0 0 26px; padding:0; list-style:none; counter-reset:hs;}
.hsteps li{counter-increment:hs; position:relative; padding:2px 0 20px 46px; margin:0; font-size:16.5px; line-height:1.7; color:var(--read);}
.hsteps li:last-child{padding-bottom:0}
.hsteps li::before{content:counter(hs); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; font-size:14px; font-weight:700; background:var(--purple-50); color:var(--purple-700); border:1px solid var(--purple-100);}
.hsteps li::after{content:""; position:absolute; left:15px; top:38px; bottom:2px; width:1.5px; background:var(--gray-200);}
.hsteps li:last-child::after{display:none}
.hsteps b{display:block; font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:3px; color:var(--ink);}
.hshot{margin:20px 0; border:1px dashed var(--gray-200); border-radius:16px; background:var(--gray-50);
  min-height:150px; display:grid; place-items:center; color:var(--gray-600); font-size:13.5px; text-align:center; padding:24px;}
.hshot .hshot-ic{width:38px; height:38px; opacity:.5; margin-bottom:8px;}

/* --- coded device outlines for /cihazlar (V19 — no logos, no photos) --- */
.devgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0;}
@media(max-width:640px){ .devgrid{grid-template-columns:1fr} }
.devcard{display:flex; gap:16px; align-items:flex-start; padding:18px; border:1px solid var(--gray-200); border-radius:16px; background:#fff;}
.dev-outline{flex:none; width:58px; height:78px; border:2px solid var(--slate-600); border-radius:10px; position:relative; background:var(--gray-50);}
.dev-outline::before{content:""; position:absolute; inset:7px 6px; border:1.5px solid var(--gray-200); border-radius:4px;}
.dev-outline.phone{width:44px; height:82px;}
.devcard b{display:block; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); margin-bottom:4px;}
.devcard p{margin:0; font-size:14.5px; line-height:1.6; color:var(--gray-600);}

/* --- feature/no lists (yenilikler + entegrasyonlar) --- */
.featlist{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px;}
.featlist li{position:relative; padding:13px 16px 13px 44px; background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:12px; font-size:15.5px; line-height:1.55; color:var(--read);}
.featlist li::before{position:absolute; left:15px; top:13px; width:20px; height:20px; border-radius:50%; display:grid;
  place-items:center; font-size:12px; font-weight:700;}
.featlist.var li::before{content:"✓"; background:var(--success-bg); color:var(--success-ink); border:1px solid var(--success-line);}
.featlist.yok li::before{content:"✕"; background:#FCEBEB; color:#B4232A; border:1px solid #F3D2D2;}
.featlist.soonl li::before{content:"→"; background:var(--purple-50); color:var(--purple-700); border:1px solid var(--purple-100);}
.featlist .soon{margin-left:6px;}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}