/* =========================================================
   360 SOFT — TEMA TASARIM SİSTEMİ
   Bu dosya tüm sayfalar (anasayfa, hizmet detay, referans
   detay, blog liste/detay) tarafından ortak kullanılır.
   Yeni bir sayfa şablonu eklerken önce burada karşılığı olan
   bir bileşen var mı diye bak, yoksa dosyanın sonuna ekle.
   ========================================================= */

:root{
  /* Renk */
  --bg:#FFFFFF;
  --surface:#F6F6F8;
  --surface-2:#EFEFF3;
  --line:rgba(11,13,18,.09);
  --text-hi:#0B0D12;
  --text-mid:#5B616D;
  --text-low:#9BA1AE;
  --violet:#6E5BFF;
  --cyan:#0EA5A0;
  --coral:#F4573A;

  /* Tipografi */
  --display:'Bricolage Grotesque', sans-serif;
  --body:'Inter', sans-serif;

  /* Yardımcı */
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --container:1280px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text-hi);font-family:var(--body);overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul{list-style:none;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 40px;}
@media(max-width:720px){.wrap{padding:0 22px;}}
::selection{background:var(--violet);color:#fff;}

/* ---------------- nav (tüm sayfalarda ortak) ---------------- */
header{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 0;transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s;border-bottom:1px solid transparent;}
header.scrolled{background:rgba(255,255,255,0.78);backdrop-filter:blur(16px);padding:14px 0;border-color:var(--line);}
nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--container);margin:0 auto;padding:0 40px;}
@media(max-width:720px){nav{padding:0 22px;}}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em;}
.brand .pandamark{width:30px;height:30px;}
.navlinks{display:flex;align-items:center;gap:38px;font-size:14px;color:var(--text-mid);list-style:none;margin:0;padding:0;}
.navlinks > a,.navlinks li{list-style:none;}
.navlinks a{transition:color .25s;text-decoration:none;color:inherit;}
.navlinks a:hover, .navlinks a.active{color:var(--text-hi);}
.navlinks li{position:relative;}
.navlinks li > a{display:flex;align-items:center;gap:5px;padding:8px 0;}
.navlinks li.menu-item-has-children > a::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;opacity:.6;transition:transform .25s;}
.navlinks li.menu-item-has-children:hover > a::after{transform:rotate(-135deg);margin-top:2px;}
.submenu-toggle{display:none;} /* Masaüstünde gizli, sadece mobilde görünür (aşağıda) */

/* Dropdown paneli — masaüstünde hover ile açılır */
.navlinks .sub-menu{list-style:none;margin:0;padding:10px;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:240px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 45px -18px rgba(11,13,18,.25);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:250;}
.navlinks li.menu-item-has-children:hover > .sub-menu,
.navlinks li.menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.navlinks .sub-menu li{width:100%;}
.navlinks .sub-menu li > a{display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;white-space:nowrap;color:var(--text-mid);}
.navlinks .sub-menu li > a:hover{background:var(--surface);color:var(--text-hi);}
.navlinks .sub-menu li.menu-item-has-children > a::after{display:none;} /* 2. seviye ok gösterilmez, sade tutulur */

@media(max-width:860px){.navlinks{display:none;}}
.navcta{font-size:13.5px;font-weight:500;background:var(--text-hi);color:#fff;padding:10px 20px;border-radius:100px;transition:transform .25s, box-shadow .25s;}
.navcta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,13,18,.18);}

/* ---------------- page hero (iç sayfalar için küçük hero) ---------------- */
.page-hero{padding:170px 0 80px;position:relative;overflow:hidden;}
.page-hero .breadcrumb{font-size:13px;color:var(--text-low);margin-bottom:22px;}
.page-hero .breadcrumb a{color:var(--text-mid);}
.page-hero .breadcrumb a:hover{color:var(--text-hi);}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.6vw,64px);letter-spacing:-0.02em;line-height:1.04;max-width:820px;}
.page-hero .lead{font-size:18px;color:var(--text-mid);max-width:600px;margin-top:22px;line-height:1.6;}
.page-hero .meta-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:36px;}
.page-hero .meta-row div{font-size:13px;color:var(--text-low);}
.page-hero .meta-row strong{display:block;color:var(--text-hi);font-family:var(--display);font-size:15px;font-weight:600;}

/* ---------------- full-bleed hero (sadece anasayfa) ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 60px;overflow:hidden;}
.halo{position:absolute;inset:-20%;z-index:0;pointer-events:none;will-change:transform;}
.halo span{position:absolute;border-radius:50%;filter:blur(100px);}
.halo .h1{width:44vw;height:44vw;background:var(--violet);opacity:.16;top:6%;left:10%;animation:drift1 26s ease-in-out infinite;}
.halo .h2{width:38vw;height:38vw;background:var(--cyan);opacity:.16;bottom:4%;right:8%;animation:drift2 32s ease-in-out infinite;}
.halo .h3{width:28vw;height:28vw;background:var(--coral);opacity:.12;top:34%;right:26%;animation:drift3 22s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(4%,6%) scale(1.08);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-5%,-4%) scale(1.1);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-3%,5%) scale(0.92);}}
@media(prefers-reduced-motion:reduce){.halo span{animation:none !important;}}

.hero-content{position:relative;z-index:2;max-width:920px;}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-mid);background:var(--surface);border:1px solid var(--line);padding:8px 16px;border-radius:100px;margin-bottom:30px;}
.badge .micropanda{width:16px;height:16px;}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,7.2vw,88px);line-height:0.98;letter-spacing:-0.03em;margin-bottom:28px;}
.hero h1 .grad, .grad-text{background:linear-gradient(100deg,var(--violet),var(--cyan) 55%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{font-size:19px;color:var(--text-mid);max-width:560px;margin:0 auto 44px;line-height:1.5;}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------------- buttons (ortak) ---------------- */
.btn-primary{display:inline-block;background:var(--text-hi);color:#fff;font-weight:600;font-size:15px;padding:16px 30px;border-radius:100px;transition:transform .25s, box-shadow .25s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(11,13,18,.22);}
.btn-ghost{display:inline-block;border:1px solid var(--line);font-size:15px;padding:16px 30px;border-radius:100px;transition:border-color .25s,background .25s;color:var(--text-hi);}
.btn-ghost:hover{border-color:var(--text-low);background:var(--surface);}

.scrolldown{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-size:12px;color:var(--text-low);display:flex;flex-direction:column;align-items:center;gap:8px;}
.scrolldown .line{width:1px;height:34px;background:linear-gradient(var(--text-low),transparent);animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ---------------- reveal utility (ortak, main.js tetikler) ---------------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------------- section shell (ortak) ---------------- */
section{position:relative;padding:150px 0;}
section.tight{padding:90px 0;}
.section-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-low);margin-bottom:20px;font-weight:600;}
.section-title{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.6vw,54px);letter-spacing:-0.02em;line-height:1.05;max-width:760px;}
.section-sub{font-size:17px;color:var(--text-mid);max-width:520px;margin-top:20px;line-height:1.6;}

/* ---------------- pillars list (anasayfa) ---------------- */
.pillars{display:flex;flex-direction:column;}
.pillar-row{display:flex;align-items:baseline;justify-content:space-between;padding:34px 0;border-top:1px solid var(--line);gap:24px;}
.pillars .pillar-row:last-child{border-bottom:1px solid var(--line);}
.pillar-row .pname{font-family:var(--display);font-weight:600;font-size:clamp(26px,4.2vw,52px);letter-spacing:-0.02em;transition:color .3s, transform .3s;}
.pillar-row:hover .pname{color:transparent;background:linear-gradient(100deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;transform:translateX(10px);}
.pillar-row .pmeta{font-size:14px;color:var(--text-low);white-space:nowrap;}

/* ---------------- panda strip (ortak, dilediğin sayfaya ekle) ---------------- */
.panda-strip{background:var(--surface);border-radius:var(--radius-lg);padding:64px 56px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:48px;}
@media(max-width:820px){.panda-strip{grid-template-columns:1fr;text-align:center;padding:48px 30px;}}
.panda-illustration{width:120px;height:120px;flex-shrink:0;}
@media(max-width:820px){.panda-illustration{margin:0 auto;}}
.panda-copy h3{font-family:var(--display);font-weight:600;font-size:24px;margin-bottom:10px;}
.panda-copy p{color:var(--text-mid);font-size:15px;max-width:420px;}
@media(max-width:820px){.panda-copy p{margin:0 auto;}}
.panda-tags{display:flex;gap:10px;flex-wrap:wrap;}
@media(max-width:820px){.panda-tags{justify-content:center;}}
.panda-tags span{font-size:13px;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:100px;color:var(--text-mid);white-space:nowrap;}

/* ---------------- sticky showcase (anasayfa + hizmet detay) ---------------- */
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
@media(max-width:900px){.showcase-grid{grid-template-columns:1fr;}}
.showcase-visual{position:sticky;top:14vh;height:72vh;display:flex;align-items:center;justify-content:center;}
@media(max-width:900px){.showcase-visual{position:relative;top:0;height:52vh;margin-bottom:20px;}}
.mock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.94) translateY(14px);transition:opacity .6s ease, transform .6s ease;}
.mock.active{opacity:1;transform:scale(1) translateY(0);}

.phone{width:230px;height:470px;border-radius:38px;background:#12141A;border:6px solid #1B1F28;box-shadow:0 40px 80px -20px rgba(110,91,255,.28), 0 0 0 1px rgba(11,13,18,.05);position:relative;overflow:hidden;}
.phone .screen{position:absolute;inset:0;background:linear-gradient(160deg,#1B1F28,#0F1116 60%);}
.phone .bar{height:9px;border-radius:6px;background:rgba(255,255,255,.1);margin:0 18px;}
.phone .glowbar{background:linear-gradient(90deg,var(--violet),var(--cyan));}
.phone .content{position:absolute;top:56px;left:0;right:0;display:flex;flex-direction:column;gap:12px;}
.phone .content .bar{width:70%;} .phone .content .bar.short{width:40%;}
.phone .cardline{margin:22px 18px 0;height:96px;border-radius:16px;background:linear-gradient(135deg,rgba(110,91,255,.35),rgba(14,165,160,.2));border:1px solid rgba(255,255,255,.08);}

.browser{width:100%;max-width:460px;border-radius:16px;overflow:hidden;background:#12141A;box-shadow:0 40px 90px -20px rgba(14,165,160,.28), 0 0 0 1px rgba(11,13,18,.05);}
.browser .chrome{height:34px;background:#1B1F28;display:flex;align-items:center;gap:6px;padding:0 14px;}
.browser .dot{width:8px;height:8px;border-radius:50%;background:#333947;}
.browser .body{padding:26px;background:linear-gradient(170deg,#181B22,#101216);}
.browser .hbar{height:14px;width:60%;border-radius:6px;background:linear-gradient(90deg,var(--violet),var(--coral));margin-bottom:14px;}
.browser .tbar{height:8px;border-radius:5px;background:rgba(255,255,255,.1);margin-bottom:8px;}
.browser .tbar.w70{width:70%;} .browser .tbar.w50{width:50%;} .browser .tbar.w85{width:85%;}
.browser .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;}
.browser .cell{height:56px;border-radius:10px;background:rgba(255,255,255,.06);}

.codebox{width:100%;max-width:460px;border-radius:16px;overflow:hidden;background:#101216;box-shadow:0 40px 90px -20px rgba(244,87,58,.24), 0 0 0 1px rgba(11,13,18,.05);font-family:monospace;}
.codebox .chrome{height:34px;background:#1B1F28;display:flex;align-items:center;gap:6px;padding:0 14px;}
.codebox .body{padding:22px;font-size:12.5px;line-height:2;color:#9BA1AE;}
.codebox .kw{color:#A697FF;} .codebox .fn{color:#3FE0D6;} .codebox .str{color:#FF8A6E;}

.network{width:340px;height:340px;position:relative;}
.network .node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(14,165,160,.5);}
.network svg{position:absolute;inset:0;}

.showcase-text{display:flex;flex-direction:column;}
.showcase-block{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;}
@media(max-width:900px){.showcase-block{min-height:auto;padding:20px 0;}}
.showcase-block .tag{font-size:13px;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:16px;}
.showcase-block h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,40px);letter-spacing:-0.02em;margin-bottom:18px;}
.showcase-block p{font-size:16px;color:var(--text-mid);line-height:1.65;max-width:440px;}

/* ---------------- case / referans full-bleed slide ---------------- */
.case-slide{min-height:100vh;display:flex;align-items:center;position:relative;padding:100px 0;}
.case-bg{position:absolute;inset:0;z-index:0;opacity:.22;}
.case-content{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 40px;width:100%;}
@media(max-width:720px){.case-content{padding:0 22px;}}
.case-sector{font-size:13px;color:var(--text-mid);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;font-weight:600;}
.case-client{font-family:var(--display);font-weight:700;font-size:clamp(32px,5.6vw,62px);letter-spacing:-0.02em;margin-bottom:36px;max-width:900px;line-height:1.05;color:var(--text-hi);}
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:50px;}
@media(max-width:860px){.case-meta{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.case-meta{grid-template-columns:1fr;}}
.case-meta .k{font-size:12px;color:var(--text-low);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;font-weight:600;}
.case-meta .v{font-size:15.5px;color:var(--text-hi);line-height:1.5;}

/* ---------------- referans detay sayfası ek bileşenleri ---------------- */
.gallery-strip{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
@media(max-width:760px){.gallery-strip{grid-template-columns:1fr;}}
.gallery-strip .g{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--surface),var(--surface-2));aspect-ratio:4/3;}
.gallery-strip .g.tall{aspect-ratio:auto;height:100%;}
.quote-block{border-left:2px solid var(--text-hi);padding-left:28px;margin:60px 0;}
.quote-block p{font-family:var(--display);font-size:clamp(20px,2.6vw,28px);font-weight:500;letter-spacing:-0.01em;line-height:1.4;}
.quote-block span{display:block;margin-top:16px;font-size:13.5px;color:var(--text-low);}

/* ---------------- hizmet detay sayfası ek bileşenleri ---------------- */
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:var(--radius-md);overflow:hidden;}
@media(max-width:760px){.feature-list{grid-template-columns:1fr;}}
.feature-item{background:#fff;padding:36px;}
.feature-item h4{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:10px;}
.feature-item p{font-size:14px;color:var(--text-mid);line-height:1.6;}

.process-steps{display:flex;flex-direction:column;}
.process-step{display:grid;grid-template-columns:70px 1fr;gap:24px;padding:34px 0;border-top:1px solid var(--line);}
.process-steps .process-step:last-child{border-bottom:1px solid var(--line);}
.process-step .idx{font-family:var(--display);font-size:22px;color:var(--text-low);font-weight:600;}
.process-step h4{font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:8px;}
.process-step p{font-size:14.5px;color:var(--text-mid);max-width:520px;line-height:1.6;}

.faq-item{border-top:1px solid var(--line);}
.faq-list .faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--text-hi);}
.faq-q .plus{font-size:20px;color:var(--text-low);transition:transform .3s;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{padding:0 0 26px;font-size:14.5px;color:var(--text-mid);max-width:600px;line-height:1.6;}

/* ---------------- blog liste / kart bileşenleri ---------------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}
.blog-thumb{aspect-ratio:4/3;border-radius:20px;background:linear-gradient(135deg,rgba(110,91,255,.18),rgba(14,165,160,.12));margin-bottom:22px;overflow:hidden;transition:transform .5s ease;}
.blog-card:hover .blog-thumb{transform:scale(1.02);}
.blog-cat{font-size:12.5px;color:var(--cyan);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-weight:600;}
.blog-card h4{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;margin-bottom:8px;}
.blog-card p{font-size:14px;color:var(--text-mid);line-height:1.55;}
.blog-card .date{font-size:12.5px;color:var(--text-low);margin-top:10px;}

.blog-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:56px;}
.blog-filter button{font-size:13.5px;padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--text-mid);cursor:pointer;transition:all .2s;}
.blog-filter button.active, .blog-filter button:hover{background:var(--text-hi);color:#fff;border-color:var(--text-hi);}

.pagination{display:flex;gap:10px;justify-content:center;margin-top:70px;}
.pagination a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-mid);border:1px solid var(--line);transition:all .2s;}
.pagination a.active, .pagination a:hover{background:var(--text-hi);color:#fff;border-color:var(--text-hi);}

/* blog detay (tekil yazı) */
.article-body{max-width:720px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--text-mid);}
.article-body h2{font-family:var(--display);color:var(--text-hi);font-size:26px;font-weight:600;margin:48px 0 18px;letter-spacing:-0.01em;}
.article-body p{margin-bottom:22px;}
.article-body img{border-radius:var(--radius-md);margin:36px 0;}
.article-meta{display:flex;gap:20px;align-items:center;color:var(--text-low);font-size:13.5px;margin-bottom:40px;max-width:720px;margin-left:auto;margin-right:auto;}
.article-meta .divider{width:1px;height:14px;background:var(--line);}

/* ---------------- stats (ortak) ---------------- */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:760px){.stats-row{grid-template-columns:1fr 1fr;row-gap:44px;}}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(40px,5.4vw,68px);letter-spacing:-0.02em;color:var(--text-hi);}
.stat-label{font-size:13.5px;color:var(--text-mid);margin-top:10px;}

/* ---------------- marquee (ortak) ---------------- */
.marquee-wrap{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee{display:flex;gap:64px;width:max-content;animation:scroll-x 32s linear infinite;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;}}
.marquee span{font-family:var(--display);font-size:22px;color:var(--text-low);white-space:nowrap;font-weight:500;}

/* ---------------- related strip (ilgili hizmet/referans/blog) ---------------- */
.related-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--radius-md);overflow:hidden;}
@media(max-width:760px){.related-strip{grid-template-columns:1fr;}}
.related-item{background:#fff;padding:32px;transition:background .25s;}
.related-item:hover{background:var(--surface);}
.related-item .tag{font-size:11.5px;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.related-item h5{font-family:var(--display);font-size:17px;font-weight:600;margin:10px 0 6px;}
.related-item p{font-size:13.5px;color:var(--text-mid);}

/* ---------------- cta (ortak) ---------------- */
.cta-section{text-align:center;}
.cta-section h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,72px);letter-spacing:-0.02em;line-height:1.03;margin-bottom:26px;}
.cta-section p{font-size:17px;color:var(--text-mid);margin-bottom:40px;}

/* ---------------- footer (ortak) ---------------- */
footer{border-top:1px solid var(--line);padding:60px 0 44px;}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
.foot-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:20px;}
.foot-brand .pandamark{width:24px;height:24px;}
.foot-desc{font-size:13.5px;color:var(--text-low);margin-top:10px;max-width:280px;}
.foot-links{display:flex;gap:60px;flex-wrap:wrap;}
.foot-col h5{font-size:12.5px;color:var(--text-low);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;font-weight:600;}
.foot-col a{display:block;font-size:14px;color:var(--text-mid);margin-bottom:12px;transition:color .2s;}
.foot-col a:hover{color:var(--text-hi);}
.foot-bottom{margin-top:60px;font-size:12.5px;color:var(--text-low);}

/* =========================================================
   360 SOFT — WORDPRESS TEMA EKLERİ
   (Prototipteki tasarım sistemine dokunmadan, WP'ye özel
   ek bileşenler ve düzeltmeler burada toplanır.)
   ========================================================= */

/* Skip link (erişilebilirlik) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--text-hi);color:#fff;padding:14px 22px;z-index:9999;border-radius:0 0 10px 0;font-size:14px;}
.skip-link:focus{left:0;}

/* Klavye odak durumları */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}

/* WP admin bar açıkken sabit header konumu bozulmasın */
.admin-bar header{top:32px;}
@media(max-width:782px){.admin-bar header{top:46px;}}

/* Mobil menü */
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--text-hi);border-radius:2px;transition:transform .3s,opacity .3s;}
@media(max-width:860px){
  .mobile-toggle{display:flex;}
  .navcta{display:none;}
  .navlinks{display:flex;position:fixed;inset:0;top:0;background:#fff;flex-direction:column;align-items:center;justify-content:flex-start;gap:22px;font-size:20px;font-family:var(--display);font-weight:600;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .4s ease,opacity .3s ease;z-index:199;padding:100px 24px 40px;overflow-y:auto;text-align:center;}
  .navlinks.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .navlinks .navcta-mobile{display:inline-block;font-family:var(--body);font-size:15px;font-weight:500;background:var(--text-hi);color:#fff;padding:12px 26px;border-radius:100px;}
  .navlinks li{width:100%;}
  .navlinks li > a{justify-content:center;padding:6px 0;}
  .navlinks li.menu-item-has-children{position:relative;}
  .navlinks li.menu-item-has-children > a::after{display:none;} /* ok yerine ayrı toggle butonu kullanılır */
  .submenu-toggle{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;width:44px;height:44px;background:none;border:none;cursor:pointer;}
  .submenu-toggle span{width:10px;height:10px;border-right:2px solid var(--text-hi);border-bottom:2px solid var(--text-hi);transform:rotate(45deg);transition:transform .25s;}
  .submenu-toggle[aria-expanded="true"] span{transform:rotate(-135deg);}
  .navlinks .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:var(--surface);border-radius:14px;max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s ease;margin-top:0;padding:0 10px;width:100%;}
  .navlinks li.submenu-open > .sub-menu{max-height:600px;margin-top:12px;padding:10px;}
  .navlinks .sub-menu li > a{font-size:16px;padding:12px 14px;text-align:center;}
  body.menu-open{overflow:hidden;}
}
.mobile-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-toggle.is-open span:nth-child(2){opacity:0;}
.mobile-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Panda karakter sistemi — farklı pozlar için ortak boyut/konum yardımcıları */
.panda-figure{display:inline-block;}
.panda-figure svg,.panda-figure img{width:100%;height:100%;display:block;}
.panda-figure.size-sm{width:32px;height:32px;}
.panda-figure.size-md{width:64px;height:64px;}
.panda-figure.size-lg{width:120px;height:120px;}
.panda-figure.size-xl{width:200px;height:200px;}
.panda-float{animation:panda-bob 4.5s ease-in-out infinite;}
@keyframes panda-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media(prefers-reduced-motion:reduce){.panda-float{animation:none;}}

/* Hero içinde panda */
.hero-panda{position:absolute;z-index:2;right:6%;bottom:8%;width:130px;height:130px;opacity:.95;}
@media(max-width:860px){.hero-panda{display:none;}}

/* Empty / eksik veri durumları */
.notice-empty{padding:60px 0;text-align:center;color:var(--text-mid);font-size:15px;}

/* Yorumlar */
.comments-area{max-width:720px;margin:80px auto 0;}
.comments-area .comment-list{list-style:none;margin:0 0 40px;padding:0;}
.comments-area .comment-list li{padding:24px 0;border-top:1px solid var(--line);}
.comments-area .comment-author{font-family:var(--display);font-weight:600;font-size:15px;}
.comments-area .comment-meta{font-size:12.5px;color:var(--text-low);margin-bottom:10px;}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-family:var(--body);font-size:14.5px;margin-bottom:14px;background:#fff;}
.comment-respond textarea{min-height:140px;resize:vertical;}
.comment-respond .form-submit input{cursor:pointer;font-family:var(--body);}

/* Sayfalama (WP paginate_links) */
.pagination .page-numbers{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-mid);border:1px solid var(--line);transition:all .2s;margin:0 4px;}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--text-hi);color:#fff;border-color:var(--text-hi);}
.pagination .page-numbers.dots{border:none;}

/* Breadcrumb ayracı zaten prototipte var; sadece link stilini koru */
.breadcrumb a:last-child{color:var(--text-hi);}

/* Kategori/etiket rozetleri (blog) */
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
.tag-row a{font-size:12.5px;color:var(--text-mid);border:1px solid var(--line);padding:7px 14px;border-radius:100px;transition:all .2s;}
.tag-row a:hover{background:var(--text-hi);color:#fff;border-color:var(--text-hi);}

/* Sticky sidebar (blog tekil sayfa TOC / ilişkili içerik istenirse) */
.entry-sidebar{position:sticky;top:120px;}

/* WooCommerce ürün kartı — default WooCommerce görünümünü ele geçirir */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;list-style:none;margin:0;}
@media(max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.woocommerce ul.products{grid-template-columns:1fr;}}
.woocommerce ul.products li.product{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;transition:transform .3s ease,box-shadow .3s ease;}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(11,13,18,.18);}
.woocommerce ul.products li.product img{border-radius:calc(var(--radius-md) - 8px);aspect-ratio:1/1;object-fit:cover;margin-bottom:16px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-weight:600;font-size:16px;margin:0 0 8px;}
.woocommerce ul.products li.product .price{font-size:15px;color:var(--text-mid);}
.woocommerce ul.products li.product .price ins{color:var(--text-hi);text-decoration:none;font-weight:600;}
.woocommerce ul.products li.product .button{display:inline-block;margin-top:14px;background:var(--text-hi);color:#fff;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:100px;transition:transform .2s;}
.woocommerce ul.products li.product .button:hover{transform:translateY(-2px);}
.woocommerce span.onsale{background:var(--coral);color:#fff;border-radius:100px;font-size:11.5px;font-weight:600;padding:5px 12px;position:absolute;top:14px;left:14px;min-height:auto;min-width:auto;line-height:1.6;}
.woocommerce nav.woocommerce-pagination ul{border:none;display:flex;gap:8px;}
.woocommerce nav.woocommerce-pagination ul li{border:none;}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--display);font-weight:600;}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{background:var(--text-hi);color:#fff;border-radius:100px;padding:14px 26px;font-weight:600;border:none;}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{background:var(--violet);color:#fff;}
.woocommerce .quantity input.qty{border:1px solid var(--line);border-radius:10px;padding:12px;}
.woocommerce table.shop_table{border-color:var(--line);border-radius:var(--radius-sm);}
.woocommerce-checkout input.input-text,.woocommerce-checkout select,.woocommerce-checkout textarea,.woocommerce-account input.input-text{border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--violet);border-radius:12px;}
.woocommerce-message::before,.woocommerce-info::before{color:var(--violet);}

/* Servis/Referans arşiv grid'i (CPT listeleri) */
.cpt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
@media(max-width:900px){.cpt-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.cpt-grid{grid-template-columns:1fr;}}
.cpt-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:30px;transition:transform .3s,box-shadow .3s;}
.cpt-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(11,13,18,.18);}
.cpt-card .cpt-icon{width:44px;height:44px;margin-bottom:20px;}
.cpt-card h3{font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:8px;letter-spacing:-0.01em;}
.cpt-card p{font-size:14px;color:var(--text-mid);line-height:1.6;}

/* Print / debug */
.screen-reader-text{position:absolute!important;left:-9999px;}

/* Teklif formu */
.quote-form{max-width:560px;margin:0 auto;text-align:left;display:grid;gap:14px;}
.quote-form input,.quote-form textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-family:var(--body);font-size:14.5px;background:#fff;}
.quote-form textarea{min-height:110px;resize:vertical;}
.quote-form .hp-field{position:absolute;left:-9999px;}
.quote-form button{justify-self:start;}
.form-status{font-size:13.5px;min-height:18px;}
.form-status.success{color:var(--cyan);}
.form-status.error{color:var(--coral);}

/* Sticky header kapatıldığında (Tema Ayarları > Header) */
header.no-sticky{position:static;border-bottom:1px solid var(--line);}
header.no-sticky + .hero,header.no-sticky ~ .page-hero{padding-top:80px;}

/* WP içerik görselleri (öne çıkan görsel) — prototipteki boş .blog-thumb/.g div'lerine <img> eklenince */
.blog-thumb img,.g img,.cpt-card .cpt-thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.cpt-card .cpt-thumb{aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-bottom:20px;background:linear-gradient(135deg,var(--surface),var(--surface-2));}

/* Fiyatlandırma paketleri (brief Bölüm 10) */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}}
.pricing-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:34px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
.pricing-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(11,13,18,.18);}
.pricing-card.featured{border-color:var(--violet);position:relative;}
.pricing-card.featured::before{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--violet);pointer-events:none;}
.pricing-card h4{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.02em;margin-bottom:14px;}
.pricing-card .price{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);color:var(--text-hi);margin-bottom:22px;}
.pricing-card ul{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;flex:1;}
.pricing-card li{font-size:14px;color:var(--text-mid);padding-left:22px;position:relative;}
.pricing-card li::before{content:'✓';position:absolute;left:0;color:var(--cyan);font-weight:700;}
.pricing-card .btn-ghost,.pricing-card .btn-primary{text-align:center;}
.pricing-note{font-size:12.5px;color:var(--text-low);margin-top:20px;}

/* Hizmet hero istatistik satırı zaten .meta-row ile karşılanıyor (bkz. page-hero .meta-row) */

/* Testimonial kartları */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.testimonial-grid{grid-template-columns:1fr;}}
.testimonial-card{background:var(--surface);border-radius:var(--radius-md);padding:30px;display:flex;flex-direction:column;gap:16px;}
.testimonial-card .stars{color:#F4B740;font-size:14px;letter-spacing:2px;}
.testimonial-card p{font-size:14.5px;color:var(--text-mid);line-height:1.6;flex:1;}
.testimonial-card .who{display:flex;align-items:center;gap:12px;}
.testimonial-card .who .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));flex-shrink:0;}
.testimonial-card .who strong{font-family:var(--display);font-size:14px;display:block;}
.testimonial-card .who span{font-size:12.5px;color:var(--text-low);}

/* Dil değiştirici (TR/EN/AR) */
.lang-switch{display:flex;gap:4px;align-items:center;margin-left:18px;}
.lang-switch a{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--text-low);padding:5px 9px;border-radius:100px;transition:all .2s;}
.lang-switch a:hover{color:var(--text-hi);background:var(--surface);}
.lang-switch a.active{color:#fff;background:var(--text-hi);}
@media(max-width:1080px){.lang-switch{margin-left:8px;}}
@media(max-width:860px){
  .lang-switch{position:absolute;top:22px;right:70px;}
}

/* =========================================================
   MOTION SİSTEMİ — School of Motion / Psychoactive esintili
   (bkz. assets/js/motion.js — GSAP ile çalışır, GSAP yoksa
   bu stiller sadece statik/son-durum hâliyle görünür, bozulmaz)
   ========================================================= */

/* Manifesto — Psychoactive tarzı, art arda beliren kısa cümle dizisi */
.manifesto{padding:140px 0;background:var(--dark-section);color:#fff;}
.manifesto-lines{max-width:900px;margin:0 auto;}
.manifesto-lines .line{display:block;font-family:var(--display);font-weight:600;font-size:clamp(24px,4vw,42px);line-height:1.35;letter-spacing:-0.01em;color:#fff;opacity:.15;transition:opacity .2s;}
.manifesto-lines .line strong{background:linear-gradient(90deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
@media(max-width:640px){.manifesto{padding:90px 0;}}

/* Hero başlık kelime-bazlı animasyon sarmalayıcısı (GSAP ile stagger edilir) */
.hero h1 .word{display:inline-block;}

/* Section girişi (scale+fade) — motion.js .motion-section-in class'ını hedefler */
.motion-section-in{will-change:opacity,transform;}

/* GSAP yoksa (CDN engellendi vb.) .reveal elemanları CSS fallback ile görünür kalır — main.js zaten .in ekliyor */

/* =========================================================
   YANAR DÖNER / KURUMSAL VURGU SİSTEMİ
   ========================================================= */

/* Buton parlama (shimmer) — soldan sağa kayan ışık şeridi */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s ease;}
.btn-primary:hover::after{left:130%;}

/* Gradient border glow — kartlarda, hover'da dönen ışık çerçevesi */
.glow-border{position:relative;border-radius:var(--radius-md);}
.glow-border::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from var(--glow-angle,0deg),var(--violet),var(--cyan),var(--coral),var(--violet));opacity:0;transition:opacity .4s;z-index:-1;filter:blur(8px);animation:glow-rotate 4s linear infinite;}
.glow-border:hover::before{opacity:.65;}
@keyframes glow-rotate{to{--glow-angle:360deg;}}
@property --glow-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}

/* Kurumsal 4 Sütun (Bilişim Firması / Mobil Uygulama / Kurumsal Web / IT Outsourcing) */
.pillars-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:60px;}
.pillars-4 .pillar-4-item{background:#fff;padding:44px 30px;position:relative;overflow:hidden;transition:background .35s;}
.pillars-4 .pillar-4-item:hover{background:var(--dark-section);}
.pillars-4 .pillar-4-item:hover .p4-title,.pillars-4 .pillar-4-item:hover .p4-tag{color:#fff;}
.pillars-4 .pillar-4-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--violet)22,var(--cyan)11);opacity:0;transition:opacity .4s;}
.pillars-4 .pillar-4-item:hover::before{opacity:1;}
.p4-num{font-family:var(--display);font-size:13px;font-weight:700;color:var(--violet);letter-spacing:.08em;position:relative;z-index:1;}
.p4-tag{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-low);margin:18px 0 10px;position:relative;z-index:1;transition:color .35s;}
.p4-title{font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-0.01em;color:var(--text-hi);position:relative;z-index:1;transition:color .35s;line-height:1.25;}
@media(max-width:900px){.pillars-4{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pillars-4{grid-template-columns:1fr;}}

/* Rozet parlama animasyonu (hero badge, "YENİ" etiketleri vb.) */
.badge-shine{position:relative;overflow:hidden;}
.badge-shine::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0deg,rgba(110,91,255,.35) 60deg,transparent 120deg);animation:badge-spin 3s linear infinite;}
@keyframes badge-spin{to{transform:rotate(360deg);}}

/* Kart hover'da hafif "tilt" (motion.js ile 3D perspektif verilir, burada temel geçiş) */
.cpt-card,.pricing-card,.testimonial-card{transform-style:preserve-3d;perspective:800px;}

@media(prefers-reduced-motion:reduce){
  .btn-primary::after,.glow-border::before,.badge-shine::after{animation:none!important;transition:none!important;display:none!important;}
}