/* Taktaz — single portfolio page */
body.tkpf-page {
	--ink: #161a26; --muted: #6b7180; --line: #e6e9ef; --bg: #f5f7fa; --brand: #1e73be; --ease: cubic-bezier(.2,.7,.2,1);
	background: #fff;
}
body.tkpf-page .page-header { display: none !important; }
body.tkpf-page #main.site-main { padding: 0 0 70px !important; overflow: visible !important; overflow-x: clip !important; }
body.tkpf-page :is(.tkpf-hero, .wgl-portfolio-single_wrapper) { font-family: iranyekan, iransans, tahoma, sans-serif; }
.tkpf-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); }

/* ---------- Hero ---------- */
.tkpf-hero {
	position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 56px 0 64px;
	background: radial-gradient(700px 360px at 85% 10%, rgba(56,152,236,.45), transparent 60%), radial-gradient(600px 320px at 5% 100%, rgba(16,179,160,.25), transparent 60%), linear-gradient(135deg, #0b1a31, #123a66 60%, #1a5a9c);
}
.tkpf-hero:before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 36px 36px; mask-image: linear-gradient(to left, #000, transparent 70%); -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
}
.tkpf-hero_grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.tkpf-hero_text { animation: tkpf-in .9s var(--ease) both; }
@keyframes tkpf-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.tkpf-crumbs { display: flex; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.tkpf-crumbs a { color: rgba(255,255,255,.75) !important; }
.tkpf-crumbs a:hover { color: #fff !important; }
.tkpf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tkpf-chip {
	padding: 4px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #cfe3ff !important; transition: background .2s;
}
.tkpf-chip:hover { background: rgba(255,255,255,.2); }
.tkpf-hero .tkpf-title { font-size: 36px; line-height: 1.6; font-weight: 900; color: #fff; margin: 0 0 14px; }
.tkpf-lead { font-size: 15px; line-height: 2.05; color: rgba(255,255,255,.78); margin: 0 0 26px; max-width: 560px; }
.tkpf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tkpf-btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 13px; font-size: 14px; font-weight: 700;
	color: #fff !important; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: all .25s var(--ease);
}
.tkpf-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.tkpf-btn--primary { background: #fff; color: #123a66 !important; border-color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.tkpf-btn--primary:hover { background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.tkpf-btn svg { width: 16px; height: 16px; }

/* poster card (featured images are designed 4:5 posters) */
.tkpf-hero_media { position: relative; display: flex; justify-content: center; animation: tkpf-in .9s .12s var(--ease) both; }
.tkpf-poster { position: relative; margin: 0; width: min(100%, 380px); }
.tkpf-poster:before { /* tilted gradient card behind */
	content: ""; position: absolute; inset: 0; border-radius: 24px; transform: rotate(-6deg) translate(-14px, 8px);
	background: linear-gradient(135deg, #3898ec, #10b3a0); opacity: .85; transition: transform .6s var(--ease);
}
.tkpf-poster:after { /* soft glow */
	content: ""; position: absolute; inset: 10% -10%; z-index: -1; border-radius: 50%; background: #3898ec; filter: blur(70px); opacity: .45;
}
.tkpf-poster img {
	position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 22px;
	border: 5px solid rgba(255,255,255,.95); box-shadow: 0 30px 60px rgba(0,0,0,.35); transition: transform .6s var(--ease);
}
.tkpf-hero_media:hover .tkpf-poster img { transform: translateY(-6px) rotate(1.5deg); }
.tkpf-hero_media:hover .tkpf-poster:before { transform: rotate(-9deg) translate(-20px, 12px); }
.tkpf-float {
	position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px;
	font-size: 12.5px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 14px 30px rgba(0,0,0,.25);
	white-space: nowrap; animation: tkpf-bob 5s ease-in-out infinite;
}
.tkpf-float--top { top: 28px; right: -26px; }
.tkpf-float--top i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #1e73be, #3898ec); }
.tkpf-float--bottom { bottom: 34px; left: -30px; animation-delay: -2.5s; color: #123a66; }
.tkpf-float--bottom b { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
@keyframes tkpf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Body: content + info card ---------- */
body.tkpf-page .wgl-portfolio-single_wrapper { margin-top: 0; }
body.tkpf-page .wgl-portfolio-single_wrapper > .wgl-container { max-width: 1240px; padding-inline: clamp(16px, 3vw, 40px); }
body.tkpf-page .portfolio-item__meta-wrap { display: none !important; } /* image already shown in the header */
body.tkpf-page .wgl-portfolio-single_item { margin: 0 0 20px !important; padding-top: 48px; }
.tkpf-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.tkpf-body .wgl-portfolio-item_content { min-width: 0; margin: 0 !important; }

body.tkpf-page .wgl-portfolio-item_content .wrapper { font-size: 16px; line-height: 2.05; color: #33384a; }
body.tkpf-page .wgl-portfolio-item_content :is(p, li) { font-size: 16px; line-height: 2.05; text-align: justify; margin: 0 0 1em; }
body.tkpf-page .wgl-portfolio-item_content :is(h2, h3, h4) { font-weight: 700; line-height: 1.7; color: var(--ink); margin: 1.6em 0 .55em; text-align: right; }
body.tkpf-page .wgl-portfolio-item_content h2 { font-size: 21px; padding-right: 12px; border-right: 3px solid var(--brand); }
body.tkpf-page .wgl-portfolio-item_content h3 { font-size: 18px; }
body.tkpf-page .wgl-portfolio-item_content > .content > .wrapper > p:first-child { font-size: 17px; color: var(--ink); }
body.tkpf-page .wgl-portfolio-item_content a { color: var(--brand); border-bottom: 1px dashed rgba(30,115,190,.45); }
body.tkpf-page .wgl-portfolio-item_content img { max-width: 100%; height: auto; border-radius: 14px; }

/* gallery inside content: framed screenshots */
body.tkpf-page .wgl-portfolio-item_content :is(.ponico-gallery, .gallery, .wp-block-gallery, div[class$="-gallery"]) {
	display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; margin: 2em 0 1em;
}
body.tkpf-page .wgl-portfolio-item_content figure {
	margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line);
	box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 26px rgba(16,24,40,.07); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
body.tkpf-page .wgl-portfolio-item_content figure:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(16,24,40,.14); }
body.tkpf-page .wgl-portfolio-item_content figure a { display: block; border: 0 !important; overflow: hidden; }
body.tkpf-page .wgl-portfolio-item_content figure img { border-radius: 0 !important; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
body.tkpf-page .wgl-portfolio-item_content figure:hover img { transform: scale(1.04); }
body.tkpf-page .wgl-portfolio-item_content figcaption {
	display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line);
}
body.tkpf-page .wgl-portfolio-item_content figcaption:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* info card */
.tkpf-side { align-self: stretch; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tkpf-info {
	position: sticky; top: 120px; /* clears the fixed site header */
	padding: 24px; border-radius: 22px; background: var(--bg); border: 1px solid var(--line);
	font-family: iranyekan, iransans, tahoma, sans-serif;
}
.tkpf-info h3 { font-size: 16px; font-weight: 800; margin: 0 0 14px; padding-right: 12px; border-right: 3px solid var(--brand); line-height: 1.5; color: var(--ink); }
.tkpf-info dl { margin: 0; }
.tkpf-info dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tkpf-info dt { font-size: 13px; color: var(--muted); font-weight: 500; flex: 0 0 auto; }
.tkpf-info dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: left; }
.tkpf-info dd a { color: var(--brand) !important; }
.tkpf-info_cta { margin-top: 18px; padding: 18px; border-radius: 16px; text-align: center; color: #fff; background: linear-gradient(135deg, #123a66, #1e73be); }
.tkpf-info_cta p { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #fff; }
.tkpf-info_cta a {
	display: block; padding: 11px; border-radius: 12px; background: #fff; color: #123a66 !important; font-size: 13.5px; font-weight: 800;
	transition: transform .25s var(--ease);
}
.tkpf-info_cta a:hover { transform: translateY(-2px); }

body.tkpf-page .single_post_info.post_info-portfolio, body.tkpf-page .post_info-divider { display: none !important; }

/* ---------- Prev / next ---------- */
body.tkpf-page .zircona-post-navigation { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 0 !important; }
body.tkpf-page .zircona-post-navigation:before, body.tkpf-page .zircona-post-navigation:after { display: none !important; }
body.tkpf-page .zircona-post-navigation > div { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
body.tkpf-page .zircona-post-navigation .info_wrapper > a {
	display: flex !important; align-items: center; gap: 14px; flex-direction: row !important; justify-content: flex-start !important; height: 100%;
	padding: 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); transition: border-color .2s, background .2s;
}
body.tkpf-page .zircona-post-navigation .next-link_wrapper .info_wrapper > a { flex-direction: row-reverse !important; justify-content: flex-end !important; }
body.tkpf-page .zircona-post-navigation .info_wrapper > a:hover { border-color: var(--brand); background: #fff; }
body.tkpf-page .zircona-post-navigation :is(.image_prev, .image_next) { position: static !important; flex: 0 0 60px; width: 60px !important; height: 60px !important; margin: 0 !important; border-radius: 12px; overflow: hidden; }
body.tkpf-page .zircona-post-navigation :is(.image_prev, .image_next):is(:before, :after) { display: none !important; }
body.tkpf-page .zircona-post-navigation img { width: 60px; height: 60px; object-fit: cover; }
body.tkpf-page .zircona-post-navigation :is(.prev-link-info_wrapper, .next-link-info_wrapper) { flex: 1; min-width: 0; background: none !important; padding: 0 !important; }
body.tkpf-page .zircona-post-navigation :is(.prev-link-info_wrapper, .next-link-info_wrapper):before { display: block; font-size: 11.5px; font-weight: 600; color: var(--brand); }
body.tkpf-page .zircona-post-navigation .prev-link-info_wrapper:before { content: "پروژه قبلی"; }
body.tkpf-page .zircona-post-navigation .next-link-info_wrapper:before { content: "پروژه بعدی"; }
body.tkpf-page .zircona-post-navigation :is(.prev_title, .next_title) { max-width: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.8 !important; margin: 0 !important; text-align: right !important; color: var(--ink) !important; }
body.tkpf-page .zircona-post-navigation :is(.meta-wrapper, .date_post) { font-size: 12px !important; color: var(--muted) !important; text-align: right !important; }

/* ---------- Latest projects carousel ---------- */
body.tkpf-page .related_portfolio { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); }
body.tkpf-page .related_portfolio .zircona_module_title { text-align: right; margin-bottom: 20px; }
body.tkpf-page .related_portfolio .zircona_module_title h4 { font-size: 20px; font-weight: 800; padding-right: 12px; border-right: 3px solid var(--brand); line-height: 1.5; }
body.tkpf-page .related_portfolio .zircona_module_title h4:after { display: none !important; }
body.tkpf-page .related_portfolio .wgl-portfolio-item_wrapper { position: relative; border-radius: 18px; overflow: hidden; }
body.tkpf-page .related_portfolio .wgl-portfolio-item_image { border-radius: 18px; overflow: hidden; }
body.tkpf-page .related_portfolio .wgl-portfolio-item_image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease); }
body.tkpf-page .related_portfolio .wgl-portfolio-item_wrapper:hover .wgl-portfolio-item_image img { transform: scale(1.06); }
body.tkpf-page .related_portfolio .wgl-portfolio-item_description {
	position: absolute !important; inset: auto 0 0 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important;
	padding: 60px 18px 16px !important; background: linear-gradient(to top, rgba(8,14,28,.9), rgba(8,14,28,0)) !important; text-align: right;
}
body.tkpf-page .related_portfolio .wgl-portfolio-item_description .title { margin: 0 0 4px; font-size: 15px !important; line-height: 1.8 !important; font-weight: 700; }
body.tkpf-page .related_portfolio .wgl-portfolio-item_description .title a { color: #fff !important; }
body.tkpf-page .related_portfolio .portfolio-category span { font-size: 11.5px; color: rgba(255,255,255,.75) !important; background: none !important; }
body.tkpf-page .related_portfolio .portfolio-category + .portfolio-category:before { content: "، "; color: rgba(255,255,255,.75); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.tkpf-body { grid-template-columns: 1fr; }
	.tkpf-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
	.tkpf-info { position: static; }
}
@media (max-width: 900px) {
	.tkpf-hero { padding: 36px 0 44px; }
	.tkpf-hero_grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.tkpf-hero .tkpf-title { font-size: 25px; }
	.tkpf-actions .tkpf-btn { flex: 1; justify-content: center; }
	body.tkpf-page .wgl-portfolio-single_item { padding-top: 28px; }
	body.tkpf-page .wgl-portfolio-item_content :is(p, li) { font-size: 15px; }
	body.tkpf-page .wgl-portfolio-item_content :is(.ponico-gallery, .gallery, .wp-block-gallery, div[class$="-gallery"]) { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
	body.tkpf-page .zircona-post-navigation { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.tkpf-hero *, .tkpf-body * { animation: none !important; transition: none !important; }
}

/* ---------- Side slider ---------- */
.tkpf-slider {
	padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
	box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 30px rgba(16,24,40,.08); font-family: iranyekan, iransans, tahoma, sans-serif;
}
.tkpf-slider_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tkpf-slider_head h3 { font-size: 15px; font-weight: 800; margin: 0; padding-right: 10px; border-right: 3px solid var(--brand); line-height: 1.5; color: var(--ink); }
.tkpf-slider_nav { display: flex; gap: 6px; }
.tkpf-slider_nav button {
	width: 32px; height: 32px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
	font-size: 20px; line-height: 1; cursor: pointer; transition: all .2s;
}
.tkpf-slider_nav button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tkpf-slider_viewport { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--bg); }
.tkpf-slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s var(--ease), visibility .7s; border: 0 !important; }
.tkpf-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.tkpf-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0 !important; }
.tkpf-slide_cap {
	position: absolute; inset: auto 0 0 0; padding: 40px 14px 12px; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.8;
	background: linear-gradient(to top, rgba(8,14,28,.85), rgba(8,14,28,0));
}
.tkpf-slider_dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.tkpf-slider_dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d3d9e3; cursor: pointer; transition: width .3s, background .3s; }
.tkpf-slider_dots button.is-active { width: 22px; background: var(--brand); }

@media (max-width: 640px) {
	.tkpf-side { grid-template-columns: 1fr; }
	.tkpf-poster { width: min(78%, 320px); }
	.tkpf-float { font-size: 11.5px; padding: 7px 11px; }
	.tkpf-float--top { right: -18px; top: 18px; }
	.tkpf-float--bottom { left: -18px; bottom: 22px; }
	.tkpf-slider_viewport { aspect-ratio: 4 / 4.2; }
}

/* landscape featured images (older items) */
.tkpf-poster--wide { width: min(100%, 540px); }
.tkpf-poster--wide:before { transform: rotate(-4deg) translate(-14px, 10px); }
.tkpf-poster--wide img { aspect-ratio: 3 / 2; }
.tkpf-hero_media:hover .tkpf-poster--wide:before { transform: rotate(-6deg) translate(-18px, 12px); }

/* fallback main column for items without content */
body.tkpf-page .tkpf-fallback figure.tkpf-fallback_img { margin: 1.4em 0 0; }
body.tkpf-page .tkpf-fallback figure.tkpf-fallback_img img { aspect-ratio: auto; object-fit: contain; }

/* never let the sticky card sit under/over other side boxes */
.tkpf-info { z-index: 2; background: var(--bg); }
.tkpf-slider { position: relative; z-index: 1; }
@media (max-width: 640px) { .tkpf-poster--wide { width: 100%; } }

/* stored "about the project" text above Elementor-built content */
body.tkpf-page .tkpf-about { margin-bottom: 2em; padding-bottom: 1.6em; border-bottom: 1px solid var(--line); }
body.tkpf-page .tkpf-about > :first-child { margin-top: 0; }
body.tkpf-page .tkpf-about ul { padding-right: 1.3em; margin: 0 0 1em; }
body.tkpf-page .tkpf-about li { margin-bottom: .4em; }

/* single-image gallery: no arrows or dots */
.tkpf-slider--single :is(.tkpf-slider_nav, .tkpf-slider_dots) { display: none !important; }

/* ---------- Portfolio category filter: wraps on small screens, pill style ---------- */
.portfolio__filter.isotope-filter {
	display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 0 34px !important; padding: 0 !important;
	font-family: iranyekan, iransans, tahoma, sans-serif;
}
.portfolio__filter.isotope-filter a {
	display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 20px !important; height: 44px; border-radius: 999px;
	font-size: 14.5px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap;
	color: #3b4152 !important; background: #fff; border: 1px solid #e6e9ef; box-shadow: 0 1px 2px rgba(16,24,40,.04);
	transition: all .3s cubic-bezier(.2,.7,.2,1) !important;
}
.portfolio__filter.isotope-filter a:before, .portfolio__filter.isotope-filter a .number_filter { display: none !important; }
.portfolio__filter.isotope-filter a:hover { border-color: #1897bd; color: #0a5f8b !important; transform: translateY(-2px); }
.portfolio__filter.isotope-filter a.active {
	color: #fff !important; border-color: transparent;
	background: linear-gradient(135deg, #1c1d4d 0%, #0a5f8b 55%, #1897bd 100%); box-shadow: 0 10px 22px rgba(10,79,120,.28);
}
@media (max-width: 600px) {
	.portfolio__filter.isotope-filter { gap: 8px; margin-bottom: 24px !important; }
	.portfolio__filter.isotope-filter a { height: 40px; padding: 0 16px !important; font-size: 13.5px !important; }
}

/* filter pills: beat the theme's square button rule */
.portfolio__filter.isotope-filter a { border-radius: 999px !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; }
.portfolio__filter.isotope-filter a.active { box-shadow: 0 10px 22px rgba(10,79,120,.28) !important; background-color: transparent !important; }