.project-detail-page{background:var(--primary-color)}.project-detail-loader{background-color:var(--primary-color);justify-content:center;align-items:center;min-height:100vh;display:flex}.loader-spinner{border:3px solid var(--tertiary-color);border-top-color:var(--accent-color);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.project-not-found{background-color:var(--primary-color);flex-direction:column;justify-content:center;align-items:center;gap:2rem;min-height:100vh;display:flex}.project-not-found h2{color:var(--text-color);font-size:2rem}.back-btn{background:var(--accent-color);color:var(--primary-color);cursor:pointer;transition:var(--transition);border:none;border-radius:30px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;display:flex}.back-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ffc1074d}.hero-section{background-color:var(--primary-color);position:relative}.hero-media{border-bottom:1px solid var(--tertiary-color);width:100%;position:relative;overflow:hidden}.hero-image{object-fit:cover;object-position:center;width:100%;height:clamp(260px,48vh,620px);display:block}.back-button{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;width:52px;height:52px;transition:var(--transition);background:#00000073;border:1px solid #ffffff59;border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;display:flex;position:absolute;top:24px;left:24px}[dir=rtl] .back-button{left:auto;right:24px}.back-button:hover{background:var(--accent-color);color:var(--primary-color);transform:translateY(-1px)scale(1.04)}.project-heading-section{background:linear-gradient(180deg, var(--primary-color) 0%, #1a1a1acc 100%);padding:2.25rem 1.5rem 1.25rem}.project-heading-container{max-width:1200px;margin:0 auto}.hero-title{color:#fff;margin-bottom:1.35rem;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.15}.tech-badges{flex-wrap:wrap;gap:.75rem;display:flex}.tech-badge{border:1px solid var(--accent-color);color:var(--accent-color);transition:var(--transition);background:#ffc1071f;border-radius:999px;padding:.6rem 1rem;font-size:.92rem;font-weight:600}.tech-badge:hover{background:var(--accent-color);color:var(--primary-color)}.tech-badge-more{color:#fff;background:#ffffff1a;border-color:#ffffff4d}.story-section{background-color:var(--primary-color);padding:4rem 2rem 6rem}.story-container{grid-template-columns:300px 1fr;gap:4rem;max-width:1200px;margin:0 auto;display:grid}[dir=rtl] .story-container{direction:rtl}.story-sidebar{position:relative}.sidebar-content{background:var(--secondary-color);border:1px solid var(--tertiary-color);border-radius:20px;padding:1.6rem;position:sticky;top:110px}.sidebar-item{border-bottom:1px solid var(--tertiary-color);align-items:center;gap:1rem;padding:1rem 0;display:flex}.sidebar-item:last-of-type{border-bottom:none}.sidebar-icon{color:var(--accent-color);flex-shrink:0;font-size:1.3rem}.sidebar-item>div{flex-direction:column;display:flex}.sidebar-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:.86rem}.sidebar-value{color:var(--text-color);font-size:1.02rem;font-weight:600}.share-section{border-top:1px solid var(--tertiary-color);margin-top:1rem;padding-top:1.2rem}.share-label{color:var(--text-secondary);margin-bottom:.95rem;font-size:.95rem;display:block}.share-buttons{gap:.8rem;display:flex}.share-btn{border:2px solid var(--tertiary-color);width:44px;height:44px;color:var(--text-color);cursor:pointer;transition:var(--transition);background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:1.05rem;display:flex;position:relative}.share-btn:hover{border-color:var(--accent-color);color:var(--accent-color);transform:translateY(-2px)}.share-btn.linkedin:hover{color:#fff;background:#0077b5;border-color:#0077b5}.share-btn.twitter:hover{color:#fff;background:#1da1f2;border-color:#1da1f2}.share-btn.copy:hover,.share-btn.copy.copied{background:var(--accent-color);border-color:var(--accent-color);color:var(--primary-color)}.copied-tooltip{background:var(--accent-color);color:var(--primary-color);white-space:nowrap;border-radius:5px;padding:.25rem .75rem;font-size:.75rem;animation:.3s fadeIn;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%)translateY(5px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.story-main{min-width:0}.story-main h2{color:var(--text-color);margin-bottom:1.6rem;padding-bottom:.85rem;font-size:2.25rem;position:relative}.story-main h2:after{content:"";background:var(--accent-color);border-radius:3px;width:70px;height:3px;position:absolute;bottom:0;left:0}[dir=rtl] .story-main h2:after{left:auto;right:0}.story-intro,.story-features,.story-tech{margin-bottom:3.25rem}.intro-text{color:#d0d0d0;font-size:1.2rem;line-height:1.9}.features-list{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.1rem;padding:0;list-style:none;display:grid}.feature-item{background:var(--secondary-color);border:1px solid var(--tertiary-color);transition:var(--transition);border-radius:16px;align-items:flex-start;gap:1rem;padding:1.2rem;display:flex}.feature-item:hover{border-color:var(--accent-color);transform:translateY(-3px)}.feature-icon{color:var(--accent-color);flex-shrink:0;margin-top:2px;font-size:1.35rem}.feature-item span{color:var(--text-color);font-size:1.05rem;line-height:1.7}.tech-grid{flex-wrap:wrap;gap:.8rem;display:flex}.tech-item{background:var(--secondary-color);border:1px solid var(--tertiary-color);color:var(--text-color);transition:var(--transition);border-radius:30px;padding:.75rem 1.4rem;font-size:1rem;font-weight:500}.tech-item:hover{border-color:var(--accent-color);color:var(--accent-color)}.video-section{background:var(--secondary-color);padding:5rem 2rem}.video-container{text-align:center;max-width:1000px;margin:0 auto}.section-title{color:var(--text-color);margin-bottom:2rem;font-size:2.2rem}.video-wrapper{border-radius:20px;width:100%;padding-top:56.25%;position:relative;overflow:hidden;box-shadow:0 25px 80px #0009}.video-iframe{width:100%;height:100%;position:absolute;top:0;left:0}.gallery-section{background:var(--primary-color);padding:5rem 2rem}.gallery-container{text-align:center;max-width:1200px;margin:0 auto}.mockups-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem;display:grid}.phone-mockup{justify-content:center;display:flex}.phone-frame{width:220px;transition:var(--transition);background:#1a1a1a;border-radius:35px;padding:12px;position:relative;box-shadow:0 0 0 2px #333,0 20px 50px #00000080}.phone-frame:hover{box-shadow:0 0 0 2px var(--accent-color), 0 30px 60px #ffc10733;transform:translateY(-10px)}.phone-notch{z-index:2;background:#000;border-radius:15px;width:80px;height:25px;position:absolute;top:15px;left:50%;transform:translate(-50%)}.mockup-image{border-radius:25px;width:100%;display:block}.cta-section{background:linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);text-align:center;padding:5rem 1.5rem}.cta-container{max-width:840px;margin:0 auto}.cta-title{color:var(--text-color);margin-bottom:1rem;font-size:2.5rem}.cta-subtitle{color:#b0b0b0;margin-bottom:2rem;font-size:1.15rem}.cta-buttons{flex-direction:column;align-items:center;gap:1rem;display:flex}.store-buttons-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:min(760px,100%);display:grid}.store-buttons-grid.single{grid-template-columns:1fr}.store-btn{justify-content:center;width:100%}.cta-btn{transition:var(--transition);border-radius:999px;justify-content:center;align-items:center;gap:.75rem;min-height:54px;padding:1rem 1.6rem;font-size:1rem;font-weight:700;text-decoration:none;display:inline-flex}.cta-buttons>.cta-btn{width:min(420px,100%)}.cta-btn.primary{background:var(--accent-color);color:var(--primary-color);box-shadow:0 12px 30px #ffc10752}.cta-btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 36px #ffc10773}.cta-btn.secondary{color:var(--text-color);border:1px solid var(--tertiary-color);background:0 0}.cta-btn.secondary:hover{border-color:var(--accent-color);color:var(--accent-color);transform:translateY(-3px)}.cta-btn svg{font-size:1.25rem}@media (max-width:992px){.story-container{grid-template-columns:1fr;gap:2rem}.sidebar-content{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:.8rem 1.2rem;display:grid;position:relative;top:0}.sidebar-item{border-bottom:none;padding:.5rem 0}.share-section{grid-column:1/-1;margin-top:.4rem;padding-top:.9rem}}@media (max-width:768px){.hero-image{height:clamp(220px,34vh,360px)}.project-heading-section{padding:1.25rem 1rem 1rem}.hero-title{margin-bottom:1rem;font-size:1.8rem}.tech-badges{gap:.5rem}.tech-badge{padding:.5rem .8rem;font-size:.82rem}.story-section,.video-section,.gallery-section,.cta-section{padding:3rem 1rem}.story-main h2{font-size:1.5rem}.intro-text{font-size:1rem}.features-list{grid-template-columns:1fr}.feature-item span{font-size:.95rem}.section-title{font-size:1.65rem}.phone-frame{width:180px}.cta-title{font-size:1.8rem}.cta-subtitle{font-size:.95rem}.store-buttons-grid{grid-template-columns:1fr}.sidebar-content{grid-template-columns:1fr;padding:1.2rem}.share-buttons{justify-content:center}.back-button{width:44px;height:44px;font-size:1rem;top:14px;left:14px}[dir=rtl] .back-button{left:auto;right:14px}}@media (max-width:480px){.hero-image{height:clamp(190px,30vh,270px)}.hero-title{font-size:1.5rem}.tech-item{padding:.55rem .95rem;font-size:.88rem}.feature-item{padding:1rem}.mockups-grid{gap:1.1rem}.phone-frame{width:160px}.cta-title{font-size:1.5rem}.cta-btn{padding:.9rem 1.2rem;font-size:.92rem}}
