:root{ --bg:#0b0f14; --fg:#eef2f6; --muted:#a5b0bf; --b:rgba(255,255,255,.1); --pri:#7aa2ff; --acc:#7ef1c2; }
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial;}
a{color:inherit}
/* Navbar */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60}
.nav{max-width:1280px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom, rgba(8,10,14,.55), rgba(8,10,14,.18));backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08);border-radius:0 0 14px 14px}
.brand a{text-decoration:none;color:inherit;font-weight:900;letter-spacing:.3px}
.menu-list{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.menu-list a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:10px;font-weight:700}
.menu-list a:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.has-sub{position:relative}
.submenu{position:absolute;display:none;top:100%;left:0;background:rgba(7,9,12,.95);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 6px;min-width:220px}
.has-sub:hover .submenu{display:block}
.submenu a{display:block;padding:8px 10px}
.menu-toggle{display:none}
/* Full-viewport project hero */
.project-hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.media{position:absolute;inset:0}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65) saturate(1.05)}
.overlay{position:relative;z-index:2;max-width:1100px;padding:0 24px;text-align:left}
.tech{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#d5dbe5cc;margin-bottom:10px}
.title{font-size:clamp(2.4rem, 6vw, 5rem);font-weight:900;letter-spacing:.2px;text-shadow:0 10px 40px rgba(0,0,0,.45);margin:0 0 8px}
.desc{color:var(--muted);max-width:820px;white-space:pre-line;margin:0 0 22px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;border:1px solid var(--b);background:linear-gradient(135deg, rgba(122,162,255,.22), rgba(126,241,194,.15));color:var(--fg);font-weight:800;text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--pri),var(--acc));color:#0b1218;border-color:transparent}
/* Single */
.single-wrap{max-width:1200px;margin:120px auto 80px;padding:0 24px;display:grid;grid-template-columns:2fr 1fr;gap:24px}
.single-header{margin-bottom:10px}.single-title{font-size:clamp(2rem,5vw,3rem);font-weight:900;margin:0}
.single-content p{color:var(--muted);line-height:1.7}
.single-video{width:100%;border-radius:12px;margin-top:12px}
.single-side .side-block{margin-bottom:14px}
.side-block h3{margin:0 0 4px;font-size:1rem;color:#dfe5eecc}
.side-line{font-weight:800}
.tags{margin-top:8px}.hash{display:inline-block;margin:4px 6px 0 0;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-weight:800}
.next{margin-top:10px}
.social-column{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* Footer */
.site-footer{padding:36px 20px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(to top, rgba(7,9,12,.75), rgba(7,9,12,.25))}
.footer-inner{max-width:1200px;margin:0 auto}
.socials{display:flex;gap:12px;justify-content:center;margin-bottom:6px}
.copy{opacity:.9}
/* Pages */
.page-wrap{max-width:1100px;margin:120px auto 80px;padding:0 24px}
.box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px}
@media (max-width: 900px){ .single-wrap{grid-template-columns:1fr} .submenu{position:static} }

/* ===== Horizontal Snap Hero ===== */
.hsnap-wrapper{position:relative;height:100svh;overflow:hidden}
.hsnap-rail{display:flex;gap:0;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.hsnap-rail::-webkit-scrollbar{height:8px}
.hsnap-slide{position:relative;flex:0 0 100vw;height:100%;scroll-snap-align:center;display:grid;place-items:center;overflow:hidden}
.hsnap-slide .media{position:absolute;inset:0}
.hsnap-slide .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65) saturate(1.05)}
.hsnap-slide .overlay{position:relative;z-index:2;max-width:1100px;padding:0 24px}
@media (max-width: 900px){ .hsnap-slide .overlay{padding:0 18px} }

/* Wheel to horizontal (JS adds .wheel-h) */
body.wheel-h, .hsnap-wrapper{overscroll-behavior:contain}


/* ===== Personal CV ===== */
.cv-body{padding:40px 24px 80px}
.cv-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr;gap:24px}
.cv-left .cv-content p{color:var(--muted);line-height:1.7}
.cv-video .single-video{width:100%;border-radius:12px;margin-bottom:14px}
.skills .skill{margin-bottom:12px}
.skills .srow{display:flex;justify-content:space-between;font-weight:800;margin-bottom:6px}
.skills .bar{height:10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.skills .bar i{display:block;height:100%;background:linear-gradient(135deg,var(--pri),var(--acc));}
@media (max-width: 900px){ .cv-grid{grid-template-columns:1fr} }


/* ===== About Me ===== */
.about-body{padding:40px 24px 80px}
.about-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:24px}
.about-portrait .portrait{width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.1);object-fit:cover}
.about-content .entry p{color:var(--muted);line-height:1.7}
.about-details{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.about-details .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.about-details .row:last-child{border-bottom:none}
.about-details .k{font-weight:800;color:#dfe5eecc}
.about-details .v{opacity:.9}

/* ===== Contact ===== */
.contact-body{padding:40px 24px 80px}
.contact-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:24px}
.contact-info .cblock{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px;margin-bottom:12px}
.contact-info h3{margin:0 0 6px;font-size:1rem;color:#dfe5eecc}
.contact-info a{word-break:break-all}
.contact-form .map-embed{margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
@media (max-width: 900px){ .about-grid,.contact-grid{grid-template-columns:1fr} }


/* ===== Single two-column ===== */
.single-grid{max-width:1200px;margin:120px auto 80px;padding:0 24px;display:grid;grid-template-columns:1.4fr 1.6fr;gap:28px}
.col-left{display:grid;align-content:start}
.single-image{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.single-title-wrap{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.single-title{font-size:clamp(2rem,5vw,3rem);font-weight:900;margin:0;line-height:1}
.single-icon{height:1.2em;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.single-content p{color:var(--muted);line-height:1.7}
.single-meta-block{margin-top:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;display:grid;gap:8px}
.meta-row{display:flex;justify-content:space-between;gap:12px}
.meta-row .k{font-weight:800;color:#dfe5eecc}
.meta-actions{display:flex;gap:10px;margin-top:6px}
@media (max-width: 900px){ .single-grid{grid-template-columns:1fr} .single-icon{height:1.4em} }

/* Stronger snap */
.hsnap-rail{scroll-snap-type:x mandatory; scroll-snap-stop: always;}
.hsnap-slide{scroll-snap-align:center;}


/* ===== Single (flex layout override) ===== */
.single-grid{display:flex;flex-wrap:wrap;max-width:1200px;margin:120px auto 80px;padding:0 24px;gap:28px;align-items:flex-start}
.single-grid .col-left{flex:1 1 52%;min-width:320px}
.single-grid .col-right{flex:1 1 48%;min-width:320px}
@media (max-width: 900px){ .single-grid .col-left,.single-grid .col-right{flex-basis:100%} }


/* ===== Single description on RIGHT ===== */
.single-desc{margin-top:14px}
.single-desc p{color:var(--muted);line-height:1.7}
.col-left .single-video{margin-top:0}


/* ===== Navbar center menu (brand left) ===== */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center !important;justify-content:unset !important}
.nav .brand{justify-self:start}
.nav .menu{justify-self:center}
@media (max-width: 900px){ .nav{grid-template-columns:1fr auto 1fr} .menu-list{gap:14px} }

/* Right column tidy spacing */
.col-right{display:flex;flex-direction:column;gap:10px}
.single-desc{margin-top:6px}


/* ===== Single strict layout ===== */
.single-grid{display:flex;flex-wrap:wrap;max-width:1200px;margin:120px auto 80px;padding:0 24px;gap:28px;align-items:flex-start}
.col-left{flex:1 1 52%;min-width:320px}
.col-right{flex:1 1 48%;min-width:320px;display:flex;flex-direction:column;gap:10px}
.single-video{width:100%;max-height:460px;border-radius:12px;border:1px solid rgba(255,255,255,.1);object-fit:cover;background:#000}
.single-image{width:100%;max-height:460px;border-radius:12px;border:1px solid rgba(255,255,255,.1);object-fit:cover}
.single-desc{margin-top:6px}
.single-desc p{color:var(--muted);line-height:1.7}
@media (max-width: 900px){ .col-left,.col-right{flex-basis:100%} }


/* ==== Portfolio single hard layout (router enforced) ==== */
.single-grid{display:flex;flex-wrap:nowrap;max-width:1200px;margin:120px auto 80px;padding:0 24px;gap:28px}
.single-grid .col-left{flex:0 0 58%;max-width:58%}
.single-grid .col-right{flex:0 0 42%;max-width:42%;display:flex;flex-direction:column;gap:12px}
.single-grid .col-right .single-desc, 
.single-grid .col-right .single-meta-block{width:100%}
.single-video,.single-image{width:100%;max-height:420px;border-radius:12px;border:1px solid rgba(255,255,255,.1);object-fit:cover;background:#000}
@media (max-width: 1024px){ .single-grid{flex-wrap:wrap} .single-grid .col-left,.single-grid .col-right{flex:1 1 100%;max-width:100%} }


/* ==== Dark + Orange theme tweaks ==== */
:root{
  --bg:#0a0c0f;
  --fg:#eef2f6;
  --muted:#a5b0bf;
  --b:rgba(255,255,255,.1);
  --accent:#ff8a3d; /* dark orange */
}
/* Buttons use orange gradient */
.btn.primary{background:linear-gradient(135deg, #ffb36a, #ff8a3d); color:#0b1218; border-color:transparent}
/* Engine / Genre label color */
.meta-row .k{color:var(--accent); font-weight:900}

/* Single sizing & alignment */
.single-grid{align-items:flex-start}
.single-title{margin-top:0}
.single-video,.single-image{max-height:520px}
.single-meta-block{margin-top:6px; border-top:1px solid rgba(255,255,255,.12); padding-top:10px}
.single-desc{margin-top:10px}


/* ==== Single equal-height columns ==== */
.media-wrap{width:100%;height:auto}
.single-video,.single-image{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#000}
/* Title icon same scale as title text */
.single-title-wrap .single-icon{height:1.1em;width:auto}


/* ==== Horizontal scroll hint/progress ==== */
.hsnap-wrapper{position:relative}
.hsnap-progress{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(560px,80vw);height:8px;border-radius:999px;background:rgba(255,138,61,.22);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 2px 8px rgba(0,0,0,.3)}
.hsnap-progress i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,#ffb36a,#ff8a3d)}

/* ==== Single proportions: make video a bit wider (keep height sync) ==== */
.single-grid{gap:32px}
.single-grid .col-left{flex:0 0 64%;max-width:64%}
.single-grid .col-right{flex:0 0 36%;max-width:36%}
@media (max-width: 1024px){ .single-grid .col-left,.single-grid .col-right{flex:1 1 100%;max-width:100%} }


/* ==== Scroll arrows (subtle bounce) ==== */
.hsnap-arrow{position:absolute;bottom:12px;z-index:5;border:none;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);
  color:#ffb36a;font-weight:900;font-size:20px;line-height:1;padding:6px 10px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08) inset;opacity:.85;cursor:pointer}
.hsnap-arrow.left{left:16px;animation:nudgeL 1.8s infinite}
.hsnap-arrow.right{right:16px;animation:nudgeR 1.8s infinite}
@keyframes nudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes nudgeL{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}

/* Hide arrows on small viewports if undesired */
@media (max-width: 560px){
  .hsnap-arrow{font-size:18px;padding:6px 8px;bottom:10px}
}

/* ==== Single proportions wider video (70/30) ==== */
.single-grid{gap:32px}
.single-grid .col-left{flex:0 0 70%;max-width:70%}
.single-grid .col-right{flex:0 0 30%;max-width:30%}
@media (max-width: 1024px){ .single-grid .col-left,.single-grid .col-right{flex:1 1 100%;max-width:100%} }


/* ==== About CPT card ==== */
.about-card{padding:40px 24px 80px}
.about-card-inner{max-width:1100px;margin:0 auto;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:26px;display:grid;grid-template-columns:1.1fr 1.4fr;gap:24px}
.about-media .portrait{width:100%;height:auto;border-radius:18px;object-fit:cover}
.about-body .title{font-size:clamp(1.8rem,3.8vw,2.6rem);margin:0 0 8px;font-weight:900}
.about-body .subtitle{color:var(--accent);opacity:.9;margin-bottom:10px}
.skills-h{margin-top:16px}
.skills .skill{margin:10px 0}
.skills .srow{display:flex;justify-content:space-between;font-weight:800;margin-bottom:6px}
.skills .bar{height:10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.skills .bar i{display:block;height:100%;background:linear-gradient(135deg,var(--accent),#ffb36a)}
@media (max-width: 900px){ .about-card-inner{grid-template-columns:1fr} }


/* ==== Scroll UI visibility tweaks ==== */
.hsnap-wrapper{position:relative}
.hsnap-progress{pointer-events:none; z-index:15}
.hsnap-arrow{z-index:20}
/* widen media a bit more */
.single-grid .col-left{flex:0 0 72%;max-width:72%}
.single-grid .col-right{flex:0 0 28%;max-width:28%}


/* ==== Unified scroll controls (bar + arrows) ==== */
.hsnap-wrapper{position:relative}
.hsnap-controls{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:38px; display:flex; align-items:center; gap:10px;
  z-index:25;
}
.hsnap-progress{position:relative; width:min(520px,72vw); height:10px; border-radius:999px;
  background:rgba(255,138,61,.22); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 2px 8px rgba(0,0,0,.3);
  pointer-events:none;
}
.hsnap-progress i{display:block; height:100%; width:var(--p,0%); border-radius:inherit;
  background:linear-gradient(90deg,#ffb36a,#ff8a3d);
}
.hsnap-arrow{
  border:none; background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
  color:#ffb36a; font-weight:900; font-size:18px; line-height:1;
  padding:6px 9px; border-radius:999px; cursor:pointer; opacity:.9;
  box-shadow:0 2px 8px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.hsnap-arrow.left{animation:nudgeL 2.2s infinite}
.hsnap-arrow.right{animation:nudgeR 2.2s infinite}
@keyframes nudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes nudgeL{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}

@media (max-width: 560px){
  .hsnap-controls{bottom:28px; gap:8px}
  .hsnap-progress{width:min(420px,76vw); height:8px}
  .hsnap-arrow{font-size:16px; padding:6px 8px}
}

/* ==== Single title clamp + responsive ==== */
.single-title{
  font-size:clamp(1.8rem, 4.2vw, 2.8rem);
  line-height:1.05;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; word-break:break-word;
}
@media (max-width: 1024px){
  .single-title{font-size:clamp(1.6rem, 5vw, 2.4rem)}
}


/* === HSNAP unified controls === */
.hsnap-wrapper{position:relative}
.hsnap-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:36px;display:flex;align-items:center;gap:10px;z-index:40}
.hsnap-progress{position:relative;width:min(540px,74vw);height:10px;border-radius:999px;background:rgba(255,138,61,.22);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 2px 8px rgba(0,0,0,.3);pointer-events:none}
.hsnap-progress i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,#ffb36a,#ff8a3d)}
.hsnap-arrow{border:none;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);color:#ffb36a;font-weight:900;font-size:18px;line-height:1;padding:6px 9px;border-radius:999px;cursor:pointer;opacity:.92;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08) inset}
.hsnap-arrow.left{animation:nudgeL 2.2s infinite}
.hsnap-arrow.right{animation:nudgeR 2.2s infinite}
@keyframes nudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes nudgeL{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@media (max-width:560px){
  .hsnap-controls{bottom:26px;gap:8px}
  .hsnap-progress{width:min(420px,78vw);height:8px}
  .hsnap-arrow{font-size:16px;padding:6px 8px}
}

/* Single media fills its wrapper height */
.media-wrap{width:100%;height:auto}
.single-video,.single-image{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#000}


/* === Controls elevated === */
.hsnap-controls{z-index:60;bottom:36px}
/* Icon bigger next to title */
.single-title-wrap .single-icon{height:1.35em;width:auto;margin-left:.5rem;vertical-align:baseline}


/* === ADJUST: scroll controls position (lower) === */
.hsnap-controls{bottom:18px}
@media (max-width:560px){ .hsnap-controls{bottom:14px} }


/* === Contact page === */
.contact-wrap{padding:40px 24px 100px}
.contact-card{max-width:900px;margin:0 auto;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px 24px 18px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.contact-card .title{margin:0 0 8px;font-weight:900}
.contact-card .entry{color:var(--muted);margin-bottom:14px}
.contact-card .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ct-item{display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.ct-item:hover{border-color:rgba(255,138,61,.8); box-shadow:0 0 0 1px rgba(255,138,61,.5) inset}
.ct-item span{font-size:.85rem;color:var(--muted)}
.ct-item b{font-weight:800;word-break:break-all}
@media (max-width:700px){ .contact-card .grid{grid-template-columns:1fr} }


/* === SCROLL HOTFIX === */
.hsnap-controls{bottom:24px; z-index:70}
@media (max-width:560px){ .hsnap-controls{bottom:20px} }


/* === REQ: increase gap between arrows and bar === */
.hsnap-controls{gap:14px}

/* === REQ: bigger single icon === */
.single-title-wrap .single-icon{height:1.55em;width:auto;margin-left:.55rem;vertical-align:baseline}

/* === REQ: brand logo small height */
.brand img.custom-logo{height:28px;width:auto}
@media (max-width:680px){ .brand img.custom-logo{height:24px} }

/* === REQ: About skills description text block === */
.skills-desc{margin-top:12px;color:var(--muted);line-height:1.6}


/* slide media fit */
.slide-video,.slide-image{width:100%;height:100%;object-fit:cover;border-radius:16px}

/* video fit for front page hero media */
.hero-media{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}

/* more space between scroll arrows and bar */
.hsnap-controls{gap:34px}


/* === About skills description above heading === */
.skills-desc--top{margin-bottom:14px;color:var(--muted);line-height:1.65}


/* === Fix My Skills heading & spacing === */
.skills-desc--top{margin-bottom:2em} /* ~2 line space */
.skills-title{margin:0 0 10px;font-weight:900;font-size:1.05rem;letter-spacing:.2px}


/* === About layout harden (image left, content+skills right) === */
.about-card .about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
@media (max-width:900px){ .about-card .about-grid{grid-template-columns:1fr;gap:20px} }
.about-card .col-left .portrait{width:100%;height:auto;border-radius:16px;display:block}
.about-card .about-title{margin:0 0 4px}
.about-card .about-sub{color:var(--muted);margin-bottom:14px}
.about-card .about-bio{margin-bottom:18px}
.skills-desc--top{margin-bottom:16px}
.skills-title{margin:0 0 10px;font-weight:900}
.skills-list .skill{margin:10px 0 12px}
.skills-list .skill .skill-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.skills-list .skill .bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.skills-list .skill .bar i{display:block;height:100%;width:var(--v,0);background:linear-gradient(90deg,#ffb36a,#ff8a3d)}


/* === About subline + title typography tweak === */
.about-card .about-sub{
  /* +2pt, slightly bold, theme orange, less bottom gap */
  font-size: calc(1rem + 2pt);
  font-weight: 600;
  color: var(--accent, #ff8a3d);
  margin-bottom: 8px;
}
.about-card .about-title{
  /* +5–6pt bigger; keep color */
  font-size: calc(2rem + 6pt);
}


/* === HSNAP PATCH: controls to edges, bigger icon, skills animation === */
.hsnap-controls{position:fixed;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:0;padding:0 18px;pointer-events:none;z-index:40}
.hsnap-controls .hsnap-arrow{pointer-events:auto;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter: blur(2px);display:grid;place-items:center;outline:1px solid rgba(255,255,255,.06)}
.hsnap-controls .hsnap-progress{flex:1;max-width:960px;margin:0 16px;pointer-events:auto}
@media (max-width:900px){
  .hsnap-controls{bottom:14px;padding:0 12px}
  .hsnap-controls .hsnap-arrow{width:32px;height:32px}
}
.single-portfolio .project-title img,
.single-portfolio .game-title img,
.single-portfolio .title-icon,
.single-portfolio .game-icon{width:28px;height:28px;object-fit:contain;vertical-align:middle;margin-left:10px;image-rendering:auto}
@media (min-width:900px){
  .single-portfolio .project-title img,
  .single-portfolio .game-title img,
  .single-portfolio .title-icon,
  .single-portfolio .game-icon{width:32px;height:32px}
}
.skills-list .skill .bar i{width:0!important;transition:width 1.15s cubic-bezier(.2,.7,.2,1)}
.skills-animate .skills-list .skill .bar i{width:var(--v,0)!important}


/* === HSNAP FIX: neutralize legacy absolute styles inside controls === */
.hsnap-controls .hsnap-progress{position:static !important;left:auto !important;right:auto !important;transform:none !important;width:auto}
.hsnap-controls .hsnap-arrow{position:static !important;left:auto !important;right:auto !important}

/* HSNAP REVERT: hide injected controls completely */
.hsnap-controls{display:none!important}

/* HERO left-aligned, bigger title like reference */
.hero, .homepage-hero, .front-hero{--hero-pad: min(6vw,72px)}
.hero .hero-inner, .homepage-hero .hero-inner, .front-hero .hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-left:var(--hero-pad);padding-right:var(--hero-pad)}
.hero .title, .homepage-hero .title, .front-hero .title{font-weight:800;letter-spacing:.5px;text-align:left;font-size:clamp(54px,10vw,128px);line-height:.95}
.hero .lead, .homepage-hero .lead, .front-hero .lead{max-width:900px;text-align:left;opacity:.9}

/* Transparent navbar + orange hover underline */
.site-header,.navbar,.main-header{background:transparent!important;box-shadow:none!important}
.navbar .menu a,.main-header .menu a,.nav .menu a,.site-header .menu a{position:relative;transition:color .25s;will-change:color}
.navbar .menu a:hover,.main-header .menu a:hover,.nav .menu a:hover,.site-header .menu a:hover{color:#ff8a3d}
.navbar .menu a::after,.main-header .menu a::after,.nav .menu a::after,.site-header .menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,#ff8a3d,#ffb166);transform:scaleX(0);transform-origin:left;transition:transform .3s ease
}
.navbar .menu a:hover::after,.main-header .menu a:hover::after,.nav .menu a:hover::after,.site-header .menu a:hover::after{transform:scaleX(1)}
/* Brand/logo forced to left */
.header-inner,.navbar .inner,.site-header .inner{display:flex;align-items:center;gap:24px}
.brand, .site-brand, .navbar .brand{margin-right:auto}

/* Corner arrows, subtle translucency */
.hero-nav .prev, .slider-nav .prev, .hsnap-prev{position:fixed;left:24px;bottom:22px;z-index:30;
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:rgba(0,0,0,.35);backdrop-filter:blur(2px);color:#fff;transition:opacity .2s}
.hero-nav .next, .slider-nav .next, .hsnap-next{position:fixed;right:24px;bottom:22px;z-index:30;
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:rgba(0,0,0,.35);backdrop-filter:blur(2px);color:#fff;transition:opacity .2s}
.hero-nav .prev:hover,.slider-nav .prev:hover,.hsnap-prev:hover,
.hero-nav .next:hover,.slider-nav .next:hover,.hsnap-next:hover{opacity:.9}


/* --- HERO copy stricter left lock + larger title --- */
:root{--edge:clamp(12px,1.5vw,20px)}
.hero .hero-inner,.homepage-hero .hero-inner,.front-hero .hero-inner{
  margin-left:var(--edge)!important; margin-right:var(--edge)!important;
  padding-left:0!important; padding-right:0!important; align-items:flex-start!important;
}
.hero .title,.homepage-hero .title,.front-hero .title{
  font-size:clamp(64px,11vw,140px)!important; font-weight:900!important; text-align:left!important; line-height:.92!important;
}
.hero .lead,.homepage-hero .lead,.front-hero .lead{ text-align:left!important; max-width:900px!important; }

/* --- Navbar full transparent always + brand to real left edge --- */
.site-header,.navbar,.main-header{ background:transparent!important; box-shadow:none!important }
.site-header .container,.navbar .container,.main-header .container,.header-inner{ max-width:100%!important; padding-left:var(--edge)!important; padding-right:var(--edge)!important }
.brand,.site-brand,.navbar .brand{ margin-left:0!important }

/* --- Ensure native slider progress/pagination is visible (re-enable) --- */
.slider-progress,.hsnap-progress,.progress,.glide__bullets,.swiper-pagination,.slick-dots,.tns-nav{
  display:block!important; opacity:1!important; visibility:visible!important;
}

/* --- Place arrows to corners (keep, but avoid covering pagination) --- */
.hero-nav .prev,.slider-nav .prev,.hsnap-prev{ left:18px!important; bottom:22px!important; z-index:15!important }
.hero-nav .next,.slider-nav .next,.hsnap-next{ right:18px!important; bottom:22px!important; z-index:15!important }


/* ====== PORTFOLIO SITE CUSTOM PATCH vUPDATED5 ====== */
/* Edge padding for left-locked layout */
:root{ --edge: clamp(8px, 2vw, 28px); }

/* Header/Nav: force fully transparent, remove overlays, brand flush-left */
header, .site-header, .main-header, .navbar, .topbar, .header, .header-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
header::before, header::after,
.site-header::before, .site-header::after,
.main-header::before, .main-header::after,
.navbar::before, .navbar::after,
.header::before, .header::after { background: transparent !important; }
.is-sticky header, .is-sticky .site-header, .is-sticky .main-header, .is-sticky .navbar {
  background: transparent !important; box-shadow:none !important;
}
/* Containers to full width, then push brand to the real left */
.site-header .container, .main-header .container, .navbar .container, .header-inner,
.header .container, .topbar .container, .nav-wrapper, .site-branding {
  max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.brand, .site-brand, .site-title, .site-logo, .navbar-brand, .logo {
  margin-left: 0 !important; padding-left: var(--edge) !important;
}
/* Menu on the right */
.nav, .menu, .main-menu, .primary-menu, .navbar .menu, .site-navigation, .header-menu {
  margin-left: auto !important; gap: 22px;
}
/* Hover – orange with underline animation */
.nav a, .menu a, .main-menu a, .primary-menu a, .navbar .menu a, .header-menu a {
  position: relative; transition: color .25s ease;
}
.nav a:hover, .menu a:hover, .main-menu a:hover, .primary-menu a:hover, .navbar .menu a:hover, .header-menu a:hover {
  color: #ff8a3d !important;
}
.nav a::after, .menu a::after, .main-menu a::after, .primary-menu a::after, .navbar .menu a::after, .header-menu a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg,#ff8a3d,#ffb166);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav a:hover::after, .menu a:hover::after, .main-menu a:hover::after, .primary-menu a:hover::after,
.navbar .menu a:hover::after, .header-menu a:hover::after { transform: scaleX(1); }

/* Hero text left-locked + bigger title (cover/hero common names) */
.home .hero, .home .cover, .home .site-hero, .home .entry-hero { position: relative; }
.home .hero .container, .home .cover .container, .home .site-hero .container, .home .entry-hero .container,
.home .hero .hero-inner, .home .cover .hero-inner, .home .site-hero .hero-inner, .home .entry-hero .hero-inner,
body.home main > section:first-of-type .container {
  margin-left: var(--edge) !important;
  margin-right: var(--edge) !important;
  padding-left: 0 !important; padding-right: 0 !important;
  display: grid; justify-items: start; align-items: start; max-width: 1200px;
}
/* Title selectors (cover all likely variants) */
.home .hero h1, .home .cover h1, .home .site-hero h1, .home .entry-hero h1,
.home .hero .title, .home .cover .title, .home .site-hero .title, .home .entry-hero .title,
body.home main > section:first-of-type h1 {
  font-size: clamp(64px, 11vw, 140px) !important;
  line-height: .92 !important; font-weight: 900 !important; text-align: left !important;
}
.home .hero p, .home .cover p, .home .site-hero p, .home .entry-hero p,
body.home main > section:first-of-type p {
  max-width: 900px !important; text-align: left !important;
}

/* Slider/progress visibility (common libs) */
.swiper-pagination, .glide__bullets, .slick-dots, .tns-nav,
.slider-progress, .hsnap-progress, .progress {
  display: block !important; opacity: 1 !important; visibility: visible !important;
}

/* Arrows to corners, soft transparent */
.swiper-button-prev, .glide__arrow--left, .slick-prev, .hero-nav .prev, .slider-nav .prev, .hsnap-prev {
  position: fixed !important; left: 18px !important; bottom: 22px !important;
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  z-index: 15 !important; background: rgba(0,0,0,.35); color: #fff;
}
.swiper-button-next, .glide__arrow--right, .slick-next, .hero-nav .next, .slider-nav .next, .hsnap-next {
  position: fixed !important; right: 18px !important; bottom: 22px !important;
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  z-index: 15 !important; background: rgba(0,0,0,.35); color: #fff;
}
/*Contact*/
/* ===== CONTACT LAYOUT ===== */
.contact-section{padding:40px var(--edge) 100px}
.contact-section .ct-inner{
  max-width:1200px;margin:120px auto 0;display:grid;grid-template-columns:1.2fr 1fr;
  gap:32px;align-items:start;
}
@media (max-width: 900px){ .contact-section .ct-inner{grid-template-columns:1fr} }

.ct-title{font-weight:900;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin:0 0 10px}
.ct-copy{color:var(--muted);line-height:1.7;max-width:680px;margin:0 0 16px}

/* Socials (2× ikon) */
.ct-socials{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.ct-social{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);color:var(--fg);font-weight:800;
}
.ct-social:hover{border-color:rgba(255,138,61,.8);box-shadow:0 0 0 1px rgba(255,138,61,.5) inset}
.ct-social svg{width:36px;height:36px;display:block}

/* Phone / Email */
.ct-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.ct-label{display:block;color:#dfe5eecc;font-size:.9rem;font-weight:800;margin-bottom:4px}
.ct-val{font-weight:900;text-decoration:none;color:var(--fg)}
.ct-val:hover{color:#ff8a3d}

/* Form card */
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px}
.ct-form .wpcf7,
.ct-form .ct-fallback{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:var(--fg);outline:none
}
.ct-form textarea{grid-column:1 / -1;min-height:180px;resize:vertical}
.ct-form input[type="submit"],
.ct-form button{grid-column:1 / -1;justify-self:start;padding:12px 18px;border-radius:14px;
  border:1px solid var(--b);background:linear-gradient(135deg,#ffb36a,#ff8a3d);
  color:#0b1218;font-weight:800;cursor:pointer
}
/* CF7 default <p> boşluklarını kapat */
.wpcf7 form p{margin:0}

/* “Title” alanını tek satıra yaymak istersen CF7 alanına class:full ver ve şöyle aç: */
.ct-form .full{grid-column:1 / -1}

/* Logo 2× */
.brand img.custom-logo{height:56px;width:auto}
@media (max-width:680px){ .brand img.custom-logo{height:48px} }

/* ===== CONTACT – dengeleme & responsive ===== */

/* Form grid ve boşluklar */
.ct-form .wpcf7,
.ct-form .ct-fallback{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
}

/* Title alanını daima tam genişlik yap (CF7 ya da fallback) */
.ct-form input[name*="title"],
.ct-form input[placeholder="Title"],
.ct-form .your-title,
.ct-form .title{ grid-column: 1 / -1; }

/* Girdi boyutları ve okunaklık */
.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form textarea{
  height: 46px;
  padding: 12px 14px;
  font-size: 16px;
  border-radius: 12px;
}
.ct-form textarea{ min-height: 220px; height: auto; }

/* Buton hizası */
.ct-form input[type="submit"],
.ct-form button{
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
}

/* Sağdaki kart ve sol blokların dengelemesi */
.ct-right .card{ padding: 18px 18px 20px; }
.ct-info{ gap: 20px; margin-top: 14px; }

/* Sosyal butonların dokunma alanı ve ikon oranı */
.ct-social{ padding: 12px 14px; }
.ct-social svg{ width: 28px; height: 28px; } /* önce 36'ydı, orantı için düşürdük */

/* Masaüstünde kolon oranını hafif dengele */
@media (min-width: 1200px){
  .contact-section .ct-inner{ grid-template-columns: 1.05fr 0.95fr; }
}

/* Tablet & telefon: tek kolona düş, her şey tam genişlik */
@media (max-width: 900px){
  .contact-section{ padding: 24px var(--edge) 80px; }
  .contact-section .ct-inner{ grid-template-columns: 1fr; gap: 22px; }

  .ct-form .wpcf7, .ct-form .ct-fallback{ grid-template-columns: 1fr; }
  .ct-form input[name*="title"], .ct-form input[placeholder="Title"]{ grid-column: auto; }

  .ct-title{ font-size: clamp(1.8rem, 6.4vw, 2.4rem); }
  .ct-socials{ gap: 8px; }
  .ct-social{ padding: 10px 12px; }
  .ct-social svg{ width: 24px; height: 24px; }
  .ct-info{ grid-template-columns: 1fr; gap: 8px; }
}

/* Küçük telefon dokunuşu */
@media (max-width: 420px){
  .ct-form input[type="text"], .ct-form input[type="email"]{ height: 44px; }
  .ct-form textarea{ min-height: 180px; }
}

/* ========== NAV: Home şeffaf, diğer sayfalarda glass + çapraz sayfa animasyon ========== */

.site-header{position:fixed; inset:0 0 auto 0; z-index:100}
.nav{
  max-width:1280px; margin:0 auto;
  padding:14px var(--edge);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  border-radius:0 0 14px 14px;
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
.brand{ justify-self:start; display:flex; align-items:center; gap:10px;
  transition: padding .40s ease, transform .40s ease, opacity .40s ease;
}
.brand img.custom-logo{ height:56px; width:auto; transition: height .35s ease, transform .35s ease }
@media (max-width:680px){ .brand img.custom-logo{ height:48px } }
.menu{ justify-self:center }

/* --- HOME (tam şeffaf + logo gerçek sol kenara) --- */
.home .nav, .front-page .nav{
  background:transparent !important; border:0 !important; backdrop-filter:none !important;
  /* container'ı tam genişlik yap ki logo ekranın soluna dayansın */
  max-width:none; width:100%;
  padding-left:0 !important; padding-right:0 !important;
}
.home .brand, .front-page .brand{ padding-left:var(--edge) }

/* --- DİĞER SAYFALAR (glass/blur) --- */
body:not(.home):not(.front-page) .nav{
  background:linear-gradient(to bottom, rgba(8,10,14,.55), rgba(8,10,14,.18));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(160%) blur(10px);
  padding-left:var(--edge); padding-right:var(--edge);
  animation:navFadeIn .35s ease both;
}
body:not(.home):not(.front-page) .brand{ animation:brandSlideIn .40s ease both }

/* --- Anasayfadan gelindiyse: önce şeffaf gibi başlat (JS .from-home ekler) --- */
body.from-home .nav{
  background:transparent !important; border:0 !important; backdrop-filter:none !important;
  max-width:none; width:100%; padding-left:0 !important; padding-right:0 !important;
}
body.from-home .brand{ padding-left:var(--edge) }

/* Home'da turuncu hover alt-çizgisi */
.home .nav .menu a, .front-page .nav .menu a{ position:relative; transition:color .25s }
.home .nav .menu a:hover, .front-page .nav .menu a:hover{ color:#ff8a3d }
.home .nav .menu a::after, .front-page .nav .menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,#ff8a3d,#ffb166);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.home .nav .menu a:hover::after, .front-page .nav .menu a:hover::after{ transform:scaleX(1) }

/* Keyframes */
@keyframes navFadeIn{
  from{ background:transparent; border-color:transparent; backdrop-filter:none }
  to  { background:linear-gradient(to bottom, rgba(8,10,14,.55), rgba(8,10,14,.18));
        border-color:rgba(255,255,255,.08); backdrop-filter:saturate(160%) blur(10px) }
}
@keyframes brandSlideIn{
  from{ padding-left:var(--edge) }
  to  { padding-left:0 }
}

@media (prefers-reduced-motion:reduce){
  .nav, .brand, .brand img.custom-logo{ transition:none !important; animation:none !important }
}
/* === HOME hero metnini kesin SOLA kilitle === */

/* hsnap slider: grid item'ı solda tut */
.home .hsnap-slide{ 
  /* align-items: center;  justify-items: start; */
  place-items: center start !important;
}

/* overlay'i gerçek sol kenara, metinleri sola */
.home .hsnap-slide .overlay{
  justify-self: start !important;
  margin-left: var(--edge) !important;
  margin-right: auto !important;
  text-align: left !important;
}
.home .hsnap-slide .overlay :is(h1,.title,.lead,p){
  text-align: left !important;
}

/* klasik hero’larda da aynı sol kilit */
.home :is(.hero,.homepage-hero,.front-hero) .hero-inner{
  justify-self: start !important;
  align-items: flex-start !important;
  margin-left: var(--edge) !important;
  margin-right: var(--edge) !important;
  text-align: left !important;
}
.home :is(.hero,.homepage-hero,.front-hero) :is(h1,.title,.lead,p){
  text-align: left !important;
}
/* ==================== FIX PACK (drop-in) ==================== */
/* 1) Scroll bar yanında görünen fazladan ok/tuşlar */
.hsnap-arrow,
.hsnap-controls{ display:none !important; } /* okları istiyorsan bu satırı sil */

/* 2) HOME sayfasında hero başlık/metni kesin SOLA kilit */
:root{ --edge: clamp(12px, 2vw, 28px); } /* aynı edge değişkeni */

.home .hsnap-slide{ place-items: center start !important; }

.home .hsnap-slide .overlay,
.home .project-hero .overlay,  /* klasik full-viewport hero */
.home .hero .hero-inner,
.home .front-hero .hero-inner{
  justify-self: start !important;
  align-items: flex-start !important;
  margin-left: var(--edge) !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  text-align: left !important;
  max-width: 1100px; /* mevcut sınırla uyumlu */
}

/* Başlık ve metinler asla ortalanmasın */
.home .overlay :is(h1,.title,.lead,p),
.home :is(.hero,.front-hero) :is(h1,.title,.lead,p){
  text-align: left !important;
  margin-left: 0 !important;
}

/* Defansif: herhangi bir üst kapsayıcının center vermesini iptal et */
.home .overlay, .home .hero, .home .front-hero{ text-align:left !important; }
/* ================== /FIX PACK ================== */
/* ===== TUNE (compact) – FINAL PATCH v2 ======================= */
/* 1) Header daha kısa + menü yazısı +2pt (değişmedi) */
.nav{ padding:16px var(--edge) 0 var(--edge) !important; }
.menu-list a, .nav .menu a{ font-size: calc(1rem + 2pt); }

/* 2) Logo 1.5× (değişmedi) */
.brand img.custom-logo{ height:84px !important; width:auto; }
@media (max-width:680px){ .brand img.custom-logo{ height:72px !important; } }

/* 3) Başlık yanındaki ikonlar 1.5× (değişmedi) */
.single-title-wrap .single-icon,
.title img, h1 img, .title-icon, .project-title img, .game-title img{
  height:1.65em !important; width:auto !important; vertical-align:middle;
}

/* 4) See More – hizalama & hafif opak turuncu (değişmedi) */
.see-more, .btn.see-more{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  line-height:1 !important; padding:12px 16px !important; border-radius:14px !important;
  background:linear-gradient(135deg, rgba(255,138,61,.42), rgba(255,177,102,.34)) !important;
  border:1px solid rgba(255,138,61,.58) !important; color:var(--fg) !important;
}

/* 5) See More İKONU – kesin büyüt (img.single-icon ve svg’ler) */
.btn.see-more img.single-icon,
.see-more img.single-icon,
.btn.see-more > img.single-icon,
.see-more > img.single-icon,
.btn.see-more .single-icon,
.see-more .single-icon{
  width:28px !important; height:28px !important;
  min-width:28px !important; min-height:28px !important;
  max-width:none !important; max-height:none !important;
  display:inline-block !important; object-fit:contain !important;
  margin:0 !important;
}
.btn.see-more svg, .see-more svg{
  width:28px !important; height:28px !important; flex:0 0 28px !important;
}

/* 5b) See More’a çok hafif yukarı-aşağı sallanma */
@keyframes seeMicroFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.see-more, .btn.see-more{ animation: seeMicroFloat 2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .see-more, .btn.see-more{ animation:none !important; } }

/* 6) Home dışındaki sayfalarda üst boşluk (değişmedi) */
body:not(.home) main{ padding-top:104px; }

/* 7) Scroll okları görünür; çift bar olmasın (değişmedi) */
.hsnap-arrow{ display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; z-index:30 !important; }
.hsnap-controls .hsnap-progress{ display:none !important; }
.swiper-button-prev,.swiper-button-next,.slick-prev,.slick-next,.glide__arrow,.tns-controls [data-controls]{
  display:grid !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; z-index:30 !important;} 
  /* ============== FIX: slider okları bloğunu kapat ve yeni kuralları DIŞINA yaz ============== */
.swiper-button-prev,.swiper-button-next,
.slick-prev,.slick-next,
.glide__arrow,
.tns-controls [data-controls]{
  display:grid !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:30 !important;
}

/* ============== FINAL: Oyun başlığı yanındaki ikon (single-icon) büyüklüğü ============== */
/* header.single-title-wrap > img.single-icon için kesin boyut, başlıkla orantılı */
.single-title-wrap{display:flex;align-items:center;gap:.5em;}
.single-title-wrap .single-icon{
  height:clamp(44px, 3.2vw, 72px) !important; /* min 44px, masaüstünde ~60–72px */
  width:auto !important;
  min-height:44px !important;
  max-height:none !important;
  margin-left:.4rem;
  vertical-align:middle !important;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

/* Mobilde tema başka bir kural ile küçültüyorsa */
@media (max-width:900px){
  .single-title-wrap .single-icon{
    height:clamp(38px, 7vw, 56px) !important;
    min-height:38px !important;
  }
}

/* ============== See More – 3px/2s hafif sallanma ============== */
@keyframes seeMicroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.see-more,.btn.see-more{animation:seeMicroFloat 2s ease-in-out infinite;}

.site-footer .socials .social{color:#fff!important;font-weight:800;text-decoration:none}
.site-footer .socials .social:hover{color:#ff8a3d!important;text-decoration:underline;text-underline-offset:3px}

/* ===== HERO dikey ritim düzeltme (başlık, açıklama, buton) ===== */
:root{
  --hero-gap-sm: clamp(6px, 1vw, 12px);
  --hero-gap-md: clamp(10px, 1.6vw, 20px);
  --hero-btn-gap: clamp(14px, 2vw, 26px);
}

/* Overlay içini kolon yap: her şey üstten alta */
.hsnap-slide .overlay,
.hero .hero-inner,
.homepage-hero .hero-inner,
.front-hero .hero-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;          /* boşlukları biz yöneteceğiz */
  text-align:left !important;
}

/* Üstteki küçük etiket (genre/tech) – biraz yukarı ve daha sıkı */
.hsnap-slide .overlay .tech,
.hero .hero-inner .tech,
.homepage-hero .hero-inner .tech,
.front-hero .hero-inner .tech{
  margin-top: calc(var(--hero-gap-sm) * -0.5) !important; /* hafif yukarı taşı */
  margin-bottom: var(--hero-gap-sm) !important;
}

/* Başlık – altına kontrollü boşluk ver */
.hsnap-slide .overlay .title,
.hero .hero-inner .title,
.homepage-hero .hero-inner .title,
.front-hero .hero-inner .title{
  margin: 0 0 var(--hero-gap-md) 0 !important;
  line-height: .92 !important;
  display:block !important;
  position:static !important;
  transform:none !important;
}

/* Açıklama – başlığın hemen altında ve buton boşluğunu buradan yönet */
.hsnap-slide .overlay .lead,
.hsnap-slide .overlay .desc,
.hero .hero-inner .lead,
.hero .hero-inner .desc,
.homepage-hero .hero-inner .lead,
.homepage-hero .hero-inner .desc,
.front-hero .hero-inner .lead,
.front-hero .hero-inner .desc{
  display:block !important;
  position:static !important;
  margin: 0 0 var(--hero-btn-gap) 0 !important;  /* BUTON aralığı */
  max-width: min(92vw, 980px);
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* See More – her zaman açıklamanın ALTINDA, sola hizalı */
.hsnap-slide .overlay .see-more,
.hsnap-slide .overlay .btn.see-more,
.hero .hero-inner .see-more,
.hero .hero-inner .btn.see-more,
.homepage-hero .hero-inner .see-more,
.front-hero .hero-inner .see-more{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  align-self: flex-start !important;
  margin: 0 !important;                /* açıklamanın bottom’ı buton boşluğu */
  position: static !important;
  transform: none !important;
}

/* Mobilde oranları koru */
@media (max-width: 680px){
  :root{ --hero-btn-gap: clamp(12px, 3.2vw, 20px); }
}