/* ==========================================================================
   biMARJ — ana sayfa
   Kaynak: Codex HTML paketi styles.css + overrides.css.
   Yalnızca ana sayfada yüklenir; iç sayfa stilleriyle çakışmaz.
   ========================================================================== */
.hero{position:relative;overflow:hidden;min-height:483px;background:linear-gradient(90deg,#fff 0%,#fff 36%,#f5f8f6 60%,#d8e4d8 100%)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:80px;background:linear-gradient(0deg,#fff,transparent);pointer-events:none}.hero-grid{display:grid;grid-template-columns:51% 49%;min-height:483px;position:relative}.hero-copy{padding:31px 0 22px;position:relative;z-index:2}.eyebrow{display:inline-flex;background:#e1f4ed;color:#075844;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;margin-bottom:15px}.hero h1{font-size:42px;line-height:1.03;letter-spacing:-1.8px;margin:0 0 14px}.hero h1 span{color:var(--green)}.hero-copy>p{margin:0 0 18px;font-size:16px;line-height:1.65}.marketplaces{display:flex;flex-wrap:wrap;gap:12px;width:520px}.market{height:52px;min-width:115px;padding:0 17px;border-radius:9px;display:grid;place-items:center;background:white;box-shadow:0 8px 22px rgba(25,42,57,.1);font-size:19px;font-weight:800}.market.trendyol,.market.hepsi{color:#fff;background:#ff5a00}.market.n11{color:#5a21dc;font-size:25px}.market.amazon{color:#0b0d0f;font-size:22px;position:relative}.market.amazon i{position:absolute;bottom:6px;color:#ff9900;font-size:25px}.market.pazarama{background:#0a3eea;color:#fff;font-weight:500}.market.idefix{color:#1457d7;font-size:23px}.market.idefix b{color:#ec332d}.market.ptt{color:#f2ab00;font-size:21px}.trust-row{display:flex;gap:24px;margin-top:20px}.trust-row>div{display:flex;align-items:center;gap:9px}.trust-row>div>span{width:34px;height:34px;border-radius:50%;background:#e1f4ed;display:grid;place-items:center;color:var(--green)}.trust-row svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}.trust-row p{margin:0;display:flex;flex-direction:column}.trust-row b{font-size:12px}.trust-row small{font-size:9px;color:var(--muted)}
.hero-visual{position:relative;min-width:0}.hero-visual:after{content:"";position:absolute;left:-55px;top:0;bottom:0;width:170px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));z-index:0}.hand-note{position:absolute;z-index:3;right:-12px;top:45px;color:#fff;font-family:"Segoe Print","Comic Sans MS",cursive;font-size:17px;line-height:1.45;transform:rotate(-7deg);text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.25)}.hand-note span{display:block;font-size:45px;line-height:.8;transform:rotate(35deg)}
.feature-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;position:relative;z-index:5;margin-top:0;padding-top:2px}.feature{min-height:191px;border-radius:11px;padding:23px 15px 14px;text-align:center;display:flex;align-items:center;flex-direction:column;transition:.25s}.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.feature>span{width:42px;height:42px;display:grid;place-items:center}.feature>span svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2}.feature h3{font-size:15px;line-height:1.25;margin:10px 0 7px}.feature p{font-size:12px;color:#3e4b57;margin:0;line-height:1.6}.feature button{width:30px;height:30px;border-radius:50%;border:0;margin-top:auto;cursor:pointer;font-size:18px;color:#17232c}.feature.coral{background:#fff0eb;color:#ff5a22}.feature.coral button{background:#ffd0c0}.feature.blue{background:#ebf5ff;color:#087ce1}.feature.blue button{background:#cce8ff}.feature.mint{background:#e7f7ef;color:#008760}.feature.mint button{background:#c9efdc}.feature.lilac{background:#f1eaff;color:#6a22dc}.feature.lilac button{background:#ddccff}.feature.yellow{background:#fff7dd;color:#f0aa00}.feature.yellow button{background:#ffe8a5}.feature.rose{background:#fff0f1;color:#f51d4e}.feature.rose button{background:#ffccd4}
.section{padding-top:31px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-head h2{font-size:24px;letter-spacing:-.7px;margin:0}.section-head p{color:var(--muted);font-size:13px;margin:2px 0 0}.section-head>a{border:1px solid #dbe2e8;border-radius:10px;padding:10px 14px;font-size:12px;display:flex;align-items:center;gap:10px;transition:.2s}.section-head>a:hover{border-color:var(--green);color:var(--green)}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.tool-card{border:1px solid #e6ebef;border-radius:10px;background:#fff;min-height:91px;padding:14px;display:flex;align-items:flex-start;text-align:left;gap:14px;cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(20,34,46,.025)}.tool-card:hover{border-color:#b9decf;transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,34,46,.08)}.app-logo{flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:24px;font-weight:800}.app-logo svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}.app-logo.trendyol,.app-logo.hepsi{background:#ff5900}.app-logo.n11{background:linear-gradient(135deg,#7519ef,#4811b1);color:#ffdb22}.app-logo.amazon{background:#101216;color:#fff}.app-logo.green{background:#07916d}.app-logo.cyan{background:#248bea}.app-logo.teal{background:#0aae7d}.app-logo.royal{background:#277be0}.tool-card p{margin:0;display:flex;flex-direction:column}.tool-card b{font-size:13px;margin-bottom:7px}.tool-card small{font-size:11px;color:var(--muted);line-height:1.45}.empty-message{text-align:center;padding:26px;border:1px dashed #ccd8d2;border-radius:12px;color:var(--muted)}
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.blog-card{border:1px solid #e3e8ec;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 7px 18px rgba(24,38,50,.05);transition:.25s}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.article-image{height:121px;position:relative}.article-image.img-1{background-position:-48px -1139px}.article-image.img-2{background-position:-358px -1139px}.article-image.img-3{background-position:-659px -1139px}.article-image.img-4{background-position:-960px -1139px}.tag{position:absolute;top:12px;left:12px;border-radius:15px;padding:5px 12px;color:white;font-size:11px;background:#ff5a00}.blue-tag{background:#167be0}.green-tag{background:#059267}.yellow-tag{background:#ffd81b;color:#2b2300}.article-body{padding:13px 14px 12px}.article-body h3{font-size:14px;margin:0 0 7px}.article-body p{font-size:11px;color:var(--muted);line-height:1.55;margin:0;min-height:51px}.article-body footer{border:0;margin-top:14px;display:flex;justify-content:space-between;color:#607182;font-size:10px}.article-body footer span{display:flex;align-items:center;gap:5px}.article-body footer svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.cta{height:122px;border-radius:12px;background:linear-gradient(120deg,#087e60,#007252 70%,#006e50);color:white;margin-top:25px;display:flex;align-items:center;padding:24px 44px;overflow:hidden;position:relative}.cta:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 50%,rgba(255,255,255,.08),transparent 22%)}.cta-chart{width:120px;height:80px;display:flex;align-items:end;gap:8px;padding:20px 20px 8px;position:relative}.cta-chart span{width:12px;background:#ffcf29;border-radius:2px}.cta-chart span:nth-child(1){height:20px}.cta-chart span:nth-child(2){height:34px}.cta-chart span:nth-child(3){height:44px}.cta-chart span:nth-child(4){height:57px}.cta-chart i{position:absolute;right:5px;top:0;color:#ffcf29;font-size:45px;font-style:normal}.cta>div:nth-child(2){margin-left:18px}.cta h2{font-size:27px;margin:0}.cta p{font-size:18px;margin:1px 0 0}.cta>a{margin-left:auto;background:white;color:var(--green-dark);border-radius:11px;padding:14px 30px;font-weight:700;display:flex;align-items:center;gap:18px;position:relative;z-index:1}.cta>a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.cta-note{font-family:"Segoe Print","Comic Sans MS",cursive;font-size:15px;text-align:center;transform:rotate(-8deg);margin-left:42px}.cta-note b{font-size:28px}

/* overrides.css */
.hero-scene{
  background:radial-gradient(circle at 68% 12%,rgba(255,255,255,.88),transparent 18%),linear-gradient(105deg,#f5f7f4 0%,#dce7da 50%,#b8ccb1 100%);
}

/* Blog kapak görselleri artık sprite değil, gerçek yüklenen görsellerdir */
.article-image{background-image:none;background-color:#eef3f0;overflow:hidden}
.article-image img{width:100%;height:100%;object-fit:cover;display:block}
.article-image.img-1,.article-image.img-2,.article-image.img-3,.article-image.img-4{background-position:0 0}
/* Hero formu örnek gösterimdir; değerler sunucuda hesaplanır */
.calc-form input[readonly]{background:#fff;cursor:default}

/* Duyarlı kırılımlar */
@media(max-width:1080px){.container{width:min(960px,calc(100% - 32px))}.hero-grid{grid-template-columns:52% 48%}.hero h1{font-size:37px}.marketplaces{width:470px}.market{min-width:105px}.hand-note{display:none}.feature-cards{grid-template-columns:repeat(3,1fr)}.feature{min-height:175px}.footer-grid{gap:35px}}
@media(max-width:820px){.hero{min-height:780px}.hero-grid{display:block}.hero-copy{padding-top:28px}.hero-copy>p br{display:none}.hero-visual{height:370px;margin-top:10px}.hero:after{height:30px}.feature-cards{margin-top:10px}.tool-grid{grid-template-columns:repeat(2,1fr)}.blog-grid{grid-template-columns:repeat(2,1fr)}.cta{height:auto;min-height:130px;padding:25px 28px}.cta-chart{display:none}.cta>div:nth-child(2){margin-left:0}.cta h2{font-size:22px}.cta p{font-size:15px}.cta-note{display:none}.footer-grid{grid-template-columns:1.4fr 1fr;gap:30px}.footer-bottom{gap:15px}}
@media(max-width:560px){body{font-size:15px}.container{width:calc(100% - 26px)}.hero{min-height:805px}.hero h1{font-size:33px;line-height:1.08}.hero-copy>p{font-size:14px}.eyebrow{font-size:12px}.marketplaces{width:100%;gap:8px}.market{height:43px;min-width:calc(33.333% - 6px);padding:0 8px;font-size:15px}.market.n11,.market.idefix,.market.amazon,.market.ptt{font-size:18px}.trust-row{gap:9px;justify-content:space-between}.trust-row>div{gap:5px}.trust-row>div>span{width:28px;height:28px}.trust-row b{font-size:9px}.trust-row small{font-size:7px}.hero-visual{height:325px}.feature-cards{grid-template-columns:repeat(2,1fr);gap:9px}.feature{min-height:170px;padding:18px 10px 12px}.feature h3{font-size:14px}.feature p{font-size:11px}.section{padding-top:25px}.section-head{align-items:flex-end}.section-head h2{font-size:21px}.section-head p{font-size:11px}.section-head>a{font-size:0;padding:9px}.section-head>a:before{content:"Tümünü Gör";font-size:11px}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:82px}.blog-grid{grid-template-columns:1fr}.article-image{height:170px;background-size:1760px auto}.article-image.img-1{background-position:-66px -1579px}.article-image.img-2{background-position:-495px -1579px}.article-image.img-3{background-position:-913px -1579px}.article-image.img-4{background-position:-1330px -1579px}.cta{flex-wrap:wrap;text-align:center;justify-content:center;padding:24px 15px}.cta h2{font-size:19px}.cta>a{margin:18px 0 0;padding:11px 23px}.footer-grid{grid-template-columns:1fr;gap:16px}.footer-grid>div:nth-child(2),.footer-grid>div:nth-child(3){display:none}.footer-bottom{padding:18px 0;flex-direction:column}.footer-bottom nav{flex-wrap:wrap;justify-content:center}.back-top{width:38px;height:38px;right:13px;bottom:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* --- PHP entegrasyon uyumları (markup <button> yerine <a>) ------------------ */
.feature{color:inherit;text-decoration:none}
.feature-go{width:30px;height:30px;border-radius:50%;margin-top:auto;display:grid;place-items:center;
  font-size:18px;color:#17232c}
.feature.coral .feature-go{background:#ffd0c0}
.feature.blue .feature-go{background:#cce8ff}
.feature.mint .feature-go{background:#c9efdc}
.feature.lilac .feature-go{background:#ddccff}
.feature.yellow .feature-go{background:#ffe8a5}
.feature.rose .feature-go{background:#ffccd4}
.tool-card{text-decoration:none;color:inherit}
.article-image{display:block}
.article-body h3 a{color:inherit;text-decoration:none}
.article-body h3 a:hover{color:var(--green)}
.market{text-decoration:none;transition:transform .2s}
.market:hover{transform:translateY(-2px)}
.calc-submit{text-decoration:none}
.calc-submit:hover{background:var(--green-dark)}

/* ==========================================================================
   Hero revizyonu — tek parça kompozisyon + premium dashboard mockup
   Codex yerleşimi (51/49 grid, eyebrow, başlık, rozetler) korunur.
   ========================================================================== */

/* Sert dikey sınırları ve üç parçalı arka planı kaldır: tek gradyan */
.hero{
  background:
    radial-gradient(900px 420px at 78% 18%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(700px 500px at 96% 88%, rgba(0,135,96,.10), transparent 60%),
    linear-gradient(112deg, #ffffff 0%, #f7faf8 42%, #eef5ef 72%, #e3eee4 100%);
  min-height:auto; padding:46px 0 58px; overflow:visible;
}
.hero:after{ display:none; }
.hero-visual:after{ display:none; }
.hero-grid{ min-height:auto; align-items:center; gap:48px; }
.hero-copy{ padding:0; }

.hero h1{ font-size:46px; line-height:1.06; letter-spacing:-1.9px; font-weight:700; margin-bottom:16px; }
.hero-copy>p{ font-size:16.5px; line-height:1.7; color:#44535f; margin-bottom:22px; }
.eyebrow{ font-size:13.5px; }
.market{ font-size:19px; box-shadow:0 6px 18px rgba(25,42,57,.09); }
.trust-row b{ font-size:13.5px; }
.trust-row small{ font-size:11px; }
.trust-row>div>span{ width:38px; height:38px; }

/* ---- Dashboard mockup ---- */
.hero-visual{ position:relative; min-width:0; }
.dash{
  position:relative; z-index:2; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 26px 60px rgba(13,40,30,.18), 0 2px 6px rgba(13,40,30,.06);
  border:1px solid #e6ece8;
  transform:perspective(1400px) rotateY(-3deg) rotateX(1.2deg);
}
.dash-chrome{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:#f3f6f4; border-bottom:1px solid #e6ebe8;
}
.dash-chrome .dot{ width:9px; height:9px; border-radius:50%; background:#cfd7d3; }
.dash-url{
  margin-left:10px; flex:1; background:#fff; border:1px solid #e4eae6; border-radius:7px;
  font-size:11px; color:#6d7b83; padding:5px 12px; text-align:center;
}
.dash-body{ padding:18px 20px 20px; }

.dash-head{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.dash-logo{
  width:34px; height:34px; border-radius:9px; background:#ff5900; color:#fff;
  display:grid; place-items:center; font-size:21px; font-weight:700; flex:0 0 34px;
}
.dash-head strong{ display:block; font-size:15px; font-weight:600; }
.dash-head small{ display:block; font-size:11.5px; color:#77848c; margin-top:1px; }
.dash-chip{
  margin-left:auto; background:#e9f2ff; color:#0673ec; border-radius:7px;
  padding:5px 10px; font-size:11px; font-weight:500;
}

.dash-kpis{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.kpi{ background:#f6f8f7; border-radius:11px; padding:12px 13px; }
.kpi span{ display:block; font-size:11.5px; color:#77848c; }
.kpi strong{ display:block; font-size:17px; font-weight:600; margin-top:4px; letter-spacing:-.4px; }
.kpi-main{ background:linear-gradient(135deg,#e2f6ec,#d3f0e2); }
.kpi-main strong{ color:#00714f; font-size:23px; }
.kpi-main .up{ display:inline-block; margin-top:5px; font-style:normal; font-size:11px; color:#00875f; font-weight:500; }

.dash-chart{ background:#fbfcfb; border:1px solid #edf1ef; border-radius:11px; padding:13px 14px 10px; margin-bottom:14px; }
.chart-head{ display:flex; justify-content:space-between; font-size:11.5px; color:#77848c; margin-bottom:10px; }
.chart-legend{ display:flex; align-items:center; gap:6px; }
.chart-legend i{ width:9px; height:9px; border-radius:3px; background:var(--green); }
.bars{ display:flex; align-items:flex-end; gap:9px; height:74px; }
.bars span{ flex:1; background:#cfe8dc; border-radius:5px 5px 2px 2px; }
.bars .peak{ background:linear-gradient(180deg,#00a173,#007a57); }

.dash-orders{ list-style:none; margin:0 0 14px; padding:0; }
.dash-orders li{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid #f0f3f1; }
.dash-orders li:last-child{ border-bottom:0; }
.ord-ic{ width:31px; height:31px; border-radius:9px; flex:0 0 31px; display:grid; place-items:center;
  background:#e6f4ed; color:#00875f; }
.ord-ic.ic-alt{ background:#e8f1fd; color:#1a72d8; }
.ord-ic.ic-warn{ background:#fdf0e6; color:#d9762a; }
.ord-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.ord-txt{ flex:1; min-width:0; }
.ord-txt b{ display:block; font-size:13px; font-weight:500; }
.ord-txt small{ display:block; font-size:11px; color:#7a868e; }
.ord-amt{ font-size:13px; font-weight:600; color:#00714f; white-space:nowrap; }
.ord-amt.neg{ color:#b4593a; }

.dash-cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--green); color:#fff; border-radius:10px; padding:12px;
  font-size:13.5px; font-weight:600; transition:background .2s ease;
}
.dash-cta:hover{ background:var(--green-dark); }
.dash-cta svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }

.hand-note{ right:-6px; top:-14px; color:#0f7355; text-shadow:none; font-size:16px; }

/* ---- Duyarlı ---- */
@media (max-width:1440px){ .hero h1{ font-size:43px; }}
@media (max-width:1180px){
  .hero{ padding:38px 0 46px; }
  .hero h1{ font-size:38px; }
  .dash{ transform:none; }
  .hand-note{ display:none; }}
@media (max-width:820px){
  .hero-grid{ display:block; }
  .hero-visual{ height:auto; margin-top:28px; }
  .dash{ transform:none; }
  .dash-kpis{ grid-template-columns:1fr 1fr 1fr; }}
@media (max-width:560px){
  .hero{ padding:28px 0 34px; }
  .hero h1{ font-size:31px; letter-spacing:-1.1px; }
  .hero-copy>p{ font-size:15px; }
  .hero-copy>p br{ display:none; }
  .dash-body{ padding:14px 14px 16px; }
  .dash-kpis{ grid-template-columns:1fr 1fr; }
  .dash-kpis .kpi:last-child{ grid-column:1 / -1; }
  .bars{ height:60px; }
  .market{ height:44px; font-size:16px; }}

/* Kart tipografisini okunabilir seviyeye çek */
.feature h3{ font-size:16px; }
.feature p{ font-size:13px; }
.section-head h2{ font-size:26px; font-weight:600; }
.section-head p{ font-size:14px; }
.section-head>a{ font-size:13.5px; }
.tool-card b{ font-size:14.5px; }
.tool-card small{ font-size:12.5px; line-height:1.5; }
.article-body h3{ font-size:15px; line-height:1.35; }
.article-body p{ font-size:12.5px; line-height:1.6; }
.article-body footer{ font-size:11.5px; }
.tag{ font-size:11.5px; }
.cta h2{ font-size:28px; font-weight:600; }
.cta p{ font-size:17px; }
.cta>a{ font-size:15px; }

/* ==========================================================================
   Nokta düzeltmeleri — yerleşim ve tipografi korunur
   ========================================================================== */

/* 1. Blog kapak görseli: gerçek görsel + zarif yer tutucu */
.article-image{ background:linear-gradient(135deg,#eef4f0,#e3ede7); }
.article-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-fallback{
  position:absolute; inset:0; display:grid; place-items:center; gap:6px;
  background:linear-gradient(135deg,#e9f3ee 0%,#dceae3 100%); color:#79a893;
}
.thumb-fallback svg{ width:30px; height:30px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.thumb-fallback b{ font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#5d8f79; }

/* 2. Son Yazılar masaüstünde 4 kart */
.blog-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
@media (max-width:1024px){ .blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }}
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; }}
.blog-card{ min-width:0; }

/* 5. Hero yüksekliği ~400px */
.hero{ min-height:400px; padding:26px 0 30px; }
.hero-grid{ min-height:auto; gap:40px; align-items:center; }
.hero h1{ font-size:40px; line-height:1.08; letter-spacing:-1.5px; margin-bottom:12px; }
.hero-copy>p{ font-size:15.5px; line-height:1.6; margin-bottom:18px; }
.eyebrow{ margin-bottom:12px; padding:5px 11px; font-size:13px; }
.marketplaces{ gap:9px; margin-bottom:2px; }
.market{ height:44px; min-width:100px; padding:0 13px; font-size:16.5px; }
.market.n11,.market.idefix,.market.amazon,.market.ptt{ font-size:19px; }
.trust-row{ gap:18px; margin-top:16px; }
.trust-row>div>span{ width:32px; height:32px; }
.trust-row svg{ width:17px; height:17px; }

/* Dashboard mockup'ı hero yüksekliğine göre sıkılaştır */
.dash-body{ padding:13px 15px 15px; }
.dash-head{ margin-bottom:11px; }
.dash-logo{ width:30px; height:30px; flex:0 0 30px; font-size:18px; }
.dash-head strong{ font-size:14px; }
.dash-head small{ font-size:10.5px; }
.dash-kpis{ gap:8px; margin-bottom:11px; }
.kpi{ padding:9px 11px; border-radius:10px; }
.kpi span{ font-size:10.5px; }
.kpi strong{ font-size:15px; margin-top:2px; }
.kpi-main strong{ font-size:20px; }
.kpi-main .up{ font-size:10px; margin-top:3px; }
.dash-chart{ padding:10px 12px 8px; margin-bottom:10px; }
.chart-head{ font-size:10.5px; margin-bottom:8px; }
.bars{ height:52px; gap:7px; }
.dash-orders{ margin-bottom:10px; }
.dash-orders li{ padding:7px 0; gap:9px; }
.ord-ic{ width:27px; height:27px; flex:0 0 27px; border-radius:8px; }
.ord-ic svg{ width:14px; height:14px; }
.ord-txt b{ font-size:12px; }
.ord-txt small{ font-size:10.5px; }
.ord-amt{ font-size:12px; }
.dash-cta{ padding:10px; font-size:12.5px; border-radius:9px; }

/* 6. Hero ile pastel kart şeridi arasına nefes payı */
.feature-cards{ margin-top:34px; padding-top:0; }

@media (max-width:1180px){
  .hero{ min-height:auto; padding:24px 0 28px; }
  .hero h1{ font-size:36px; }
  .feature-cards{ margin-top:28px; }}
@media (max-width:820px){
  .hero{ padding:22px 0 26px; }
  .feature-cards{ margin-top:24px; }}
@media (max-width:560px){
  .hero h1{ font-size:30px; }
  .feature-cards{ margin-top:20px; }}

/* ==========================================================================
   Hero: 450px, dikey ortalı; pazaryeri logoları; güven satırı
   ========================================================================== */
.hero{ min-height:450px; padding:30px 0; display:flex; align-items:center; }
.hero > .container{ width:min(1180px, calc(100% - 40px)); }
.hero-grid{ min-height:auto; align-items:center; gap:44px; width:100%; }
.hero h1{ font-size:41px; }

/* ---- Pazaryeri logo kartları: gerçek logo assetleri ---- */
.marketplaces{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; width:100%; margin-bottom:0; }
.market{
  display:flex; align-items:center; justify-content:center;
  height:52px; min-width:0; padding:0 14px; border-radius:10px; background:#fff;
  box-shadow:0 5px 16px rgba(25,42,57,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
.market:hover{ transform:translateY(-2px); box-shadow:0 9px 22px rgba(25,42,57,.14); }
.market img{ display:block; width:auto; height:auto; max-width:100%; }
.market-text{ font-size:16px; font-weight:600; color:var(--ink); }

/* Optik denge: her markanın logo yüksekliği ayrı ayarlanır */
.market.trendyol img{ max-height:22px; }
.market.hepsi img   { max-height:20px; }
.market.n11 img     { max-height:28px; }
.market.amazon img  { max-height:26px; }
.market.pazarama img{ max-height:19px; }
.market.idefix img  { max-height:25px; }
.market.ptt img     { max-height:25px; }

/* Dolgulu kartlar (logo beyaz) */
.market.trendyol{ background:#f27a1a; }
.market.hepsi   { background:#ff6000; }
.market.pazarama{ background:#1a56db; }
.market.n11, .market.amazon, .market.idefix, .market.ptt{ background:#fff; }

/* ---- Güven satırı: tek sıra, eşit genişlik, renkli ikonlar ---- */
.trust-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  margin-top:20px; padding-top:18px; border-top:1px solid rgba(13,27,42,.07);
}
.trust-row>div{ display:flex; align-items:center; gap:10px; min-width:0; }
.trust-row>div>span{
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  display:grid; place-items:center;
}
.trust-row svg{ width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.trust-row p{ margin:0; display:flex; flex-direction:column; min-width:0; }
.trust-row b{ font-size:13.5px; font-weight:600; line-height:1.25; }
.trust-row small{ font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:2px; }

.trust-free>span{ background:#e7f6ee; color:#0f8a5f; }
.trust-rate>span{ background:#e8f1fd; color:#2f72cf; }
.trust-safe>span{ background:#f3ecfd; color:#7048c9; }

/* ---- Son Yazılar: masaüstünde 4 kart ---- */
.blog-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }

/* ---- Duyarlı ---- */
@media (max-width:1180px){
  .hero{ min-height:auto; padding:26px 0; display:block; }
  .hero h1{ font-size:36px; }}
@media (max-width:1024px){
  .blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }}
@media (max-width:820px){
  .hero{ padding:22px 0 26px; }
  .marketplaces{ grid-template-columns:repeat(4, 1fr); }
  .trust-row{ grid-template-columns:repeat(3, 1fr); gap:10px; }
  .trust-row b{ font-size:12.5px; }
  .trust-row small{ font-size:10.5px; }}
@media (max-width:640px){
  .marketplaces{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  .market{ height:46px; padding:0 10px; }
  .trust-row{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .trust-safe{ grid-column:1 / -1; }}
@media (max-width:560px){
  .hero h1{ font-size:30px; }
  .blog-grid{ grid-template-columns:1fr; }
  .marketplaces{ grid-template-columns:repeat(2, 1fr); }
  .trust-row{ grid-template-columns:1fr; }
  .trust-safe{ grid-column:auto; }}

/* Satır içi SVG logolar: kart içinde optik olarak eşitlenir */
.market svg{ display:block; width:auto; height:auto; max-width:100%; }
.market.trendyol svg{ height:21px; }
.market.hepsi svg   { height:19px; }
.market.n11 svg     { height:27px; }
.market.amazon svg  { height:25px; }
.market.pazarama svg{ height:18px; }
.market.idefix svg  { height:24px; }
.market.ptt svg     { height:24px; }
@media (max-width:640px){
  .market.trendyol svg{ height:18px; } .market.hepsi svg{ height:16px; }
  .market.n11 svg{ height:23px; }      .market.amazon svg{ height:21px; }
  .market.pazarama svg{ height:15px; } .market.idefix svg{ height:20px; }
  .market.ptt svg{ height:20px; }}

/* ==========================================================================
   Hero: masaüstünde TAM 450px
   Yalnızca ≥1181px'te sabit yükseklik; tablet/mobil içerik akışında kalır.
   ========================================================================== */
@media (min-width:1181px){
  .hero{
    height:450px; min-height:450px; max-height:450px;
    padding:0; display:flex; align-items:center;
  }
  .hero-grid{ align-items:center; }

  /* Sol sütun: 450px içine sığacak şekilde sıkılaştırıldı */
  .eyebrow{ margin-bottom:10px; }
  .hero h1{ font-size:38px; line-height:1.07; margin-bottom:10px; }
  .hero-copy>p{ font-size:15px; line-height:1.55; margin-bottom:14px; }
  .marketplaces{ gap:8px; }
  .market{ height:46px; }
  .trust-row{ margin-top:14px; padding-top:13px; }
  .trust-row>div>span{ width:34px; height:34px; flex:0 0 34px; }

  /* Sağ dashboard: hero içine sığacak şekilde küçültüldü */
  .dash-body{ padding:11px 13px 12px; }
  .dash-head{ margin-bottom:9px; }
  .dash-logo{ width:28px; height:28px; flex:0 0 28px; font-size:17px; }
  .dash-head strong{ font-size:13px; }
  .dash-head small{ font-size:10px; }
  .dash-chip{ padding:4px 9px; font-size:10px; }
  .dash-kpis{ gap:7px; margin-bottom:9px; }
  .kpi{ padding:8px 10px; }
  .kpi span{ font-size:10px; }
  .kpi strong{ font-size:14px; }
  .kpi-main strong{ font-size:18px; }
  .kpi-main .up{ font-size:9.5px; margin-top:2px; }
  .dash-chart{ padding:9px 11px 7px; margin-bottom:9px; }
  .chart-head{ font-size:10px; margin-bottom:7px; }
  .bars{ height:40px; gap:6px; }
  .dash-orders{ margin-bottom:9px; }
  .dash-orders li{ padding:6px 0; }
  .ord-ic{ width:25px; height:25px; flex:0 0 25px; }
  .ord-ic svg{ width:13px; height:13px; }
  .ord-txt b{ font-size:11.5px; }
  .ord-txt small{ font-size:10px; }
  .ord-amt{ font-size:11.5px; }
  .dash-cta{ padding:9px; font-size:12px; }}

/* Hero 450px'e tam otursun: son sıkılaştırma (yalnızca masaüstü) */
@media (min-width:1181px){
  .eyebrow{ margin-bottom:8px; padding:4px 10px; font-size:12.5px; }
  .hero h1{ font-size:36px; margin-bottom:9px; }
  .hero-copy>p{ font-size:14.5px; line-height:1.5; margin-bottom:12px; }
  .market{ height:42px; }
  .marketplaces{ gap:7px; }
  .trust-row{ margin-top:11px; padding-top:10px; }
  .trust-row>div>span{ width:32px; height:32px; flex:0 0 32px; }
  .trust-row b{ font-size:12.5px; }
  .trust-row small{ font-size:10.5px; }

  .dash-chrome{ padding:8px 12px; }
  .dash-body{ padding:10px 12px 11px; }
  .dash-head{ margin-bottom:8px; }
  .dash-kpis{ margin-bottom:8px; }
  .kpi{ padding:7px 9px; }
  .dash-chart{ padding:8px 10px 6px; margin-bottom:8px; }
  .bars{ height:34px; }
  .dash-orders{ margin-bottom:8px; }
  .dash-orders li{ padding:5px 0; }
  .ord-ic{ width:23px; height:23px; flex:0 0 23px; }
  .dash-cta{ padding:8px; }}

/* Güven satırı ikonları: Codex'in .trust-row>div>span kuralı daha özgül
   olduğu için renkler ezilmişti. Özgüllük eşitlendi. */
.trust-row > div > span{ color:inherit; }
.trust-row > .trust-free > span{ background:#e7f6ee; color:#0f8a5f; }
.trust-row > .trust-rate > span{ background:#e8f1fd; color:#2f72cf; }
.trust-row > .trust-safe > span{ background:#f3ecfd; color:#7048c9; }
.trust-row > div > span > svg{
  width:18px; height:18px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ==========================================================================
   Pazaryeri logoları — orijinal PNG varlıklar
   Her markanın en/boy oranı farklı olduğu için yükseklikler optik olarak
   ayrı ayarlanır. Yeni logo eklerken yalnızca ilgili satır güncellenir.
   ========================================================================== */
.marketplaces{ display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; }
.market{
  display:flex; align-items:center; justify-content:center;
  height:48px; padding:0 12px; border-radius:11px;
  background:#fff; border:1px solid #eaeeec;
  box-shadow:0 3px 10px rgba(25,42,57,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.market:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(25,42,57,.12);
  border-color:#dfe6e2; }
.market img{
  display:block; width:auto; height:auto;
  max-width:100%;            /* oran korunur, stretch olmaz */
  object-fit:contain;
}
.market-text{ font-size:15px; font-weight:600; color:var(--ink); }

/* Optik denge — oranı çok farklı logolar aynı ağırlıkta görünsün */
.market.trendyol img   { max-height:19px; }   /* oran 2.97 */
.market.hepsi img      { max-height:16px; }   /* oran 4.25 */
.market.n11 img        { max-height:26px; }   /* oran 1.90 */
.market.amazon img     { max-height:20px; }   /* oran 3.32 */
.market.pazarama img   { max-height:13px; }   /* oran 6.26 */
.market.idefix img     { max-height:26px; }   /* oran 1.88 */
.market.ptt img        { max-height:17px; }   /* oran 4.57 */

/* ==========================================================================
   Güven satırı — referans düzen: yuvarlak ikon + başlık + açıklama
   ========================================================================== */
.trust-row{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px; margin-top:16px; padding-top:0; border-top:0;
}
.trust-row > div{ display:flex; align-items:center; gap:11px; min-width:0; }
.trust-row > div > span{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  display:grid; place-items:center; background:#e6f4ec; color:#0f8a5f;
}
.trust-row > div > span > svg{
  width:17px; height:17px; display:block;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.trust-row p{ margin:0; display:flex; flex-direction:column; min-width:0; }
.trust-row b{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.trust-row small{ font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:1px; }
/* Referanstaki gibi üçü de aynı yeşil aile; sadece ikon farklı */
.trust-row > .trust-free > span,
.trust-row > .trust-rate > span,
.trust-row > .trust-safe > span{ background:#e6f4ec; color:#0f8a5f; }

/* ==========================================================================
   Hero dashboard — daha kompakt ve premium
   ========================================================================== */
.hero-visual{ max-width:520px; margin-left:auto; }
.dash{ border-radius:14px; box-shadow:0 18px 44px rgba(13,40,30,.14), 0 1px 4px rgba(13,40,30,.05); }
.dash-chrome{ padding:8px 12px; }
.dash-chrome .dot{ width:8px; height:8px; }
.dash-url{ font-size:10.5px; padding:4px 10px; }
.dash-body{ padding:13px 14px 14px; }
.dash-kpis{ grid-template-columns:1.25fr 1fr; gap:9px; }
.dash-orders li{ padding:7px 0; }

/* Orijinal logolar kendi renklerini taşıdığı için kartlar beyaz zemin olur.
   Önceki sürümdeki marka dolgulu kart kuralları (.market.trendyol vb.)
   aynı özgüllükte geçersiz kılınır. */
.market.trendyol, .market.hepsi, .market.pazarama,
.market.n11, .market.amazon, .market.idefix, .market.ptt{
  background:#fff; border-color:#eaeeec;
}

/* ==========================================================================
   Hero görseli — e-ticaret operasyon panosu (ürün tanıtım kompozisyonu)
   Form, input veya hesap tablosu yok; kartlar, grafik ve durum rozetleri var.
   ========================================================================== */
.showcase{
  position:relative; width:100%; max-width:520px; margin-left:auto;
  padding:26px 18px 30px 42px;
}

/* Ana pano */
.sc-panel{
  position:relative; z-index:2; background:#fff; border-radius:18px;
  border:1px solid #e9efec; padding:18px 18px 14px;
  box-shadow:0 22px 50px rgba(13,40,30,.16), 0 2px 6px rgba(13,40,30,.05);
}
.sc-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.sc-head-ic{
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  display:grid; place-items:center; background:#e6f4ec; color:#0f8a5f;
}
.sc-head-ic svg{ width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sc-head-txt{ flex:1; min-width:0; }
.sc-head-txt b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.sc-head-txt small{ display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.sc-trend{
  font-size:11px; font-weight:600; color:#0f8a5f;
  background:#e6f4ec; border-radius:20px; padding:5px 10px; white-space:nowrap;
}

/* Vurgulu metrik */
.sc-metric{
  background:linear-gradient(135deg,#e4f6ed,#d3efe0);
  border-radius:13px; padding:13px 15px; margin-bottom:14px;
}
.sc-metric > span{ display:block; font-size:11.5px; color:#3d6d5c; }
.sc-metric > strong{
  display:block; font-size:27px; font-weight:600; color:#00714f;
  letter-spacing:-.8px; line-height:1.15; margin-top:2px;
}
.sc-metric > em{ display:block; font-style:normal; font-size:11.5px; color:#3d6d5c; margin-top:3px; }

/* Grafik — saf CSS, görsel dosyası yok */
.sc-chart{
  position:relative; display:flex; align-items:flex-end; gap:8px;
  height:82px; padding:0 2px; margin-bottom:12px;
}
.sc-area{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background:linear-gradient(180deg, rgba(0,161,115,.10), rgba(0,161,115,0) 78%);
  border-radius:10px;
}
.sc-bar{
  position:relative; flex:1; height:var(--v); min-width:0;
  background:#cfe8dc; border-radius:6px 6px 3px 3px;
}
.sc-bar.is-peak{ background:linear-gradient(180deg,#00a173,#007a57); }

.sc-foot{ display:flex; gap:16px; font-size:11px; color:var(--muted); }
.sc-foot span{ display:inline-flex; align-items:center; gap:6px; }
.sc-foot i{ width:9px; height:9px; border-radius:3px; }
.sc-foot .d1{ background:#00a173; }
.sc-foot .d2{ background:#7fb7e8; }
.sc-foot .d3{ background:#f0b27a; }

/* Yüzen durum kartları */
.sc-card{
  position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid #eaeeec; border-radius:13px;
  padding:9px 13px 9px 10px;
  box-shadow:0 10px 26px rgba(13,40,30,.13);
}
.sc-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; }
.sc-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-green { background:#e6f4ec; color:#0f8a5f; }
.ic-blue  { background:#e8f1fd; color:#2f72cf; }
.ic-purple{ background:#f3ecfd; color:#7048c9; }
.sc-txt b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.sc-txt small{ display:block; font-size:10.5px; color:var(--muted); margin-top:1px; }

.sc-order{ left:0;  top:6px; }
.sc-ship { left:-6px; bottom:34px; }
.sc-store{ right:2px; bottom:0; }

/* Dekoratif noktalar */
.sc-spark{ position:absolute; border-radius:50%; z-index:1; }
.sc-spark-1{ width:88px; height:88px; right:-12px; top:-10px; background:rgba(0,161,115,.10); }
.sc-spark-2{ width:52px; height:52px; left:22px; bottom:2px; background:rgba(47,114,207,.10); }

/* ---- Duyarlı ---- */
@media (max-width:1180px){
  .showcase{ max-width:480px; padding:22px 14px 26px 34px; }
  .sc-metric > strong{ font-size:24px; }}
@media (max-width:820px){
  .showcase{ margin:0 auto; max-width:460px; padding:20px 10px 24px 26px; }}
@media (max-width:560px){
  .showcase{ padding:16px 6px 18px 14px; }
  .sc-panel{ padding:15px 14px 12px; border-radius:15px; }
  .sc-metric > strong{ font-size:22px; }
  .sc-chart{ height:66px; gap:6px; }
  .sc-card{ padding:8px 11px 8px 9px; }
  .sc-ic{ width:27px; height:27px; flex:0 0 27px; }
  .sc-txt b{ font-size:11.5px; }
  .sc-txt small{ font-size:10px; }
  .sc-ship{ left:-4px; bottom:26px; }
  .sc-trend{ display:none; }}

/* Hero 450px içinde kalsın (masaüstü) */
@media (min-width:1181px){
  .showcase{ padding:20px 16px 22px 40px; }
  .sc-panel{ padding:15px 16px 12px; }
  .sc-head{ margin-bottom:11px; }
  .sc-metric{ padding:11px 13px; margin-bottom:11px; }
  .sc-metric > strong{ font-size:24px; }
  .sc-chart{ height:68px; margin-bottom:10px; }}

/* Yüzen kartlar panoyu örtmesin: pano sağa kaydırılır, kartlar sol/alt
   kenarda yalnızca hafifçe taşar. */
.showcase{ max-width:560px; padding:24px 10px 30px 104px; }
.sc-card{ max-width:170px; }
.sc-order{ left:0;    top:2px;    right:auto; bottom:auto; }
.sc-ship { left:-10px; top:150px;  right:auto; bottom:auto; }
.sc-store{ right:-8px; bottom:-10px; left:auto; top:auto; }
.sc-spark-1{ right:-6px; top:-6px; }
.sc-spark-2{ left:86px; bottom:-6px; }

@media (max-width:1180px){
  .showcase{ max-width:520px; padding:22px 8px 26px 92px; }
  .sc-ship{ top:132px; }}
@media (max-width:820px){
  .showcase{ margin:0 auto; max-width:520px; padding:20px 8px 26px 88px; }}
@media (max-width:560px){
  .showcase{ padding:16px 4px 22px 56px; max-width:100%; }
  .sc-card{ max-width:150px; }
  .sc-ship{ top:auto; bottom:66px; left:-6px; }
  .sc-store{ right:-4px; bottom:-8px; }}
@media (min-width:1181px){
  .showcase{ padding:18px 10px 24px 104px; }
  .sc-ship{ top:136px; }}

/* flex gap desteklemeyen motorlar için aralık yedeği */
.sc-foot span + span{ margin-left:16px; }
.sc-head-ic{ margin-right:11px; }
.sc-ic{ margin-right:9px; }
.sc-foot i{ margin-right:6px; }
supports (gap: 1px) and (display: flex)
  .sc-foot span + span, .sc-head-ic, .sc-ic, .sc-foot i{ margin-right:0; margin-left:0; }

/* Sipariş kartı pano başlığını örtmesin */
.sc-order{ left:-8px; top:-4px; }

/* ==========================================================================
   1. Araç kartı ikonları — orijinal pazaryeri ikonları
   ========================================================================== */
.app-logo.brand{
  background:#fff; border:1px solid #eaeeec; padding:5px;
  display:grid; place-items:center; overflow:hidden;
}
.app-logo.brand img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:100%; object-fit:contain;   /* oran korunur */
}
/* Optik denge: ikonların iç doluluk oranı farklı olduğu için
   her marka ayrı ayarlanır. Yeni ikon eklerken bu satırı güncelleyin. */
.app-logo.brand-trendyol img{ max-height:26px; }
.app-logo.brand-hepsi img   { max-height:30px; }
.app-logo.brand-n11 img     { max-height:28px; }
.app-logo.brand-amazon img  { max-height:24px; }

/* ==========================================================================
   2. Bölüm başlığı vurgu çizgisi — yalnızca .has-accent taşıyan bölümlerde
   ========================================================================== */
.section-head.has-accent h2{ position:relative; padding-bottom:10px; }
.section-head.has-accent h2:after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:3px; border-radius:3px;
  background:#e85d4a;
}
@media (max-width:560px){
  .section-head.has-accent h2:after{ width:44px; }}

/* Marka ikonları kutuyu daha iyi doldursun (40px kutu, 4px iç boşluk) */
.app-logo.brand{ padding:4px; border-radius:11px; }
.app-logo.brand-trendyol img{ max-height:30px; }
.app-logo.brand-hepsi img   { max-height:32px; }
.app-logo.brand-n11 img     { max-height:32px; }
.app-logo.brand-amazon img  { max-height:27px; }

/* ==========================================================================
   Pastel hesaplama kartları — tipografi ve ikon görünürlüğü
   Pastel zeminler, kart ölçüleri, ok düğmeleri ve yerleşim aynen korunur.
   Yalnızca başlık/açıklama rengi ve ikon boyutu değişir.
   ========================================================================== */

/* İkon: kartın görsel odağı. Kutu büyütüldü, iç boşluk azaltıldı.
   Renk .feature.<ton> üzerinden currentColor ile gelmeye devam eder. */
.feature-cards .feature > span{
  width: 52px; height: 52px;
  margin-bottom: 2px;
}
.feature-cards .feature > span svg{
  width: 46px; height: 46px;
  stroke-width: 2.2;            /* ince/soluk görünmesin */
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Başlık: tüm kartlarda aynı koyu ton (marka rengi yalnızca ikonda kalır) */
.feature-cards .feature h3{
  color: #0f172a;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  margin: 9px 0 6px;
}

/* Açıklama: okunaklı koyu gri */
.feature-cards .feature p{
  color: #475569;
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 820px){
  .feature-cards .feature > span{ width: 48px; height: 48px; }
  .feature-cards .feature > span svg{ width: 42px; height: 42px; }
}
@media (max-width: 560px){
  .feature-cards .feature > span{ width: 44px; height: 44px; }
  .feature-cards .feature > span svg{ width: 38px; height: 38px; }
  .feature-cards .feature h3{ font-size: 14.5px; }
}

/* ==========================================================================
   Pastel kartların alt ok butonu
   Değiştirilen seçici: .feature-cards .feature .feature-go
   (Codex'in .feature button kuralından daha özgül; üstteki ana ikonlara,
   başlığa, açıklamaya ve kart ölçülerine dokunmaz.)
   ========================================================================== */
.feature-cards .feature .feature-go{
  width: 32px; height: 32px;
  flex: 0 0 32px;              /* flex sütununda esneyip oval olmasın */
  box-sizing: border-box;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-top: auto;
  font-size: 14px;             /* ok glifi */
  line-height: 1;
  color: #17232c;
  transition: filter .2s ease, opacity .2s ease;
}
/* Hover: büyüme yok, yalnızca çok hafif koyulaşma */
.feature-cards .feature .feature-go:hover{ filter: brightness(.96); }

/* Kart alt kenarıyla dengeli boşluk */
.feature-cards .feature{ padding-bottom: 16px; }

@media (max-width: 820px){
  .feature-cards .feature .feature-go{
    width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px;
  }
  .feature-cards .feature{ padding-bottom: 14px; }
}
@media (max-width: 560px){
  .feature-cards .feature .feature-go{
    width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px;
  }
}

/* Ok butonu <span> olduğu için display:grid desteklenmeyen motorlarda
   inline kalıyor ve width/height yok sayılıyordu (oval görünüm).
   Taban olarak her motorda çalışan inline-block kullanılır; grid destekleyen
   tarayıcılar @supports ile ortalamaya döner. */
.feature-cards .feature .feature-go{
  display: inline-block;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}
@supports (display: grid){
  .feature-cards .feature .feature-go{ display: grid; place-items: center; line-height: 1; }
}
@media (max-width: 820px){
  .feature-cards .feature .feature-go{ line-height: 30px; }
  @supports (display: grid){
    .feature-cards .feature .feature-go{ line-height: 1; }
  }
}