/* ============================================================
   STYLE.CSS
   Odium Stüdyo — Ana Stil Dosyası
   ============================================================ */

/* 1. GENEL */
.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}
.section{position:relative;padding-top:var(--space-11);padding-bottom:var(--space-11)}
.section--alt{background-color:var(--bg-secondary)}
.section--alt::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--surface-border) 50%,transparent 100%)}
body.menu-open{overflow:hidden !important;position:fixed !important;width:100% !important;height:100% !important}

/* 2. NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-navbar);height:var(--navbar-height);transition:background-color var(--transition-slow),backdrop-filter var(--transition-slow),border-color var(--transition-slow);border-bottom:1px solid transparent}
.navbar--scrolled{background-color:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border-bottom-color:var(--glass-border)}
body.menu-open .navbar{z-index:250}
body.menu-open .navbar--scrolled{background-color:#0F100F;backdrop-filter:none;-webkit-backdrop-filter:none}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--space-6)}
.navbar__logo{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;transition:opacity var(--transition-fast)}
.navbar__logo:hover{opacity:.8}
.navbar__logo-img{width:36px;height:36px;object-fit:contain;flex-shrink:0;border-radius:var(--radius-sm)}
.navbar__logo-text{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.navbar__logo-accent{color:var(--text-secondary)}
.navbar__nav{display:none}
.nav-links{display:flex;align-items:center;gap:var(--space-2)}
.nav-links__item{position:relative;padding:var(--space-2) var(--space-4);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--text-secondary);border-radius:var(--radius-md);transition:color var(--transition-normal),background-color var(--transition-normal)}
.nav-links__item:hover{color:var(--text-primary);background-color:var(--surface)}
.nav-links__item.active{color:var(--text-primary)}
.nav-links__item.active::after{content:'';position:absolute;bottom:2px;left:var(--space-4);right:var(--space-4);height:2px;background-color:var(--text-primary);border-radius:var(--radius-full)}
.navbar__cta{display:none}
.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:var(--space-2);border-radius:var(--radius-md);transition:background-color var(--transition-fast);position:relative;z-index:10}
.hamburger:hover{background-color:var(--surface)}
.hamburger__line{display:block;width:22px;height:2px;background-color:var(--text-primary);border-radius:var(--radius-full);transition:transform var(--transition-normal),opacity var(--transition-normal);transform-origin:center}
.hamburger.is-active .hamburger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-active .hamburger__line:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.is-active .hamburger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 3. MOBİL MENÜ */
.mobile-menu{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:200;
  background-color:#0F100F !important;
  padding-top:calc(var(--navbar-height-mobile) + var(--space-6));
  padding-left:var(--container-padding);
  padding-right:var(--container-padding);
  padding-bottom:var(--space-8);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.35s ease,visibility 0.35s ease
}
.mobile-menu.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto
}
.mobile-menu__nav{display:flex;flex-direction:column;align-items:center;gap:var(--space-7);width:100%;max-width:400px}
.mobile-menu__links{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%}
.mobile-menu__link{display:block;width:100%;text-align:center;padding:var(--space-4) var(--space-5);font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--text-secondary);border-radius:var(--radius-lg);transition:color var(--transition-normal),background-color var(--transition-normal)}
.mobile-menu__link:hover{color:var(--text-primary);background-color:var(--surface)}
.mobile-menu__cta{width:100%;max-width:280px;text-align:center;justify-content:center}

/* 4. HERO */
.hero{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100dvh;padding-top:var(--navbar-height);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}
.hero__glow--1{width:600px;height:600px;top:-200px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%)}
.hero__glow--2{width:400px;height:400px;bottom:10%;left:-100px;background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);opacity:.3}
.hero__glow--3{width:350px;height:350px;top:30%;right:-80px;background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);opacity:.2}
.hero__grain{position:absolute;inset:0;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px 128px;pointer-events:none}
.hero__grid{position:relative;z-index:var(--z-base);display:flex;flex-direction:column;align-items:center;gap:var(--space-9);padding-top:var(--space-9);padding-bottom:var(--space-11)}
.hero__text{display:flex;flex-direction:column;text-align:center}
.hero__title{font-family:var(--font-display);font-size:var(--text-display);font-weight:var(--weight-bold);line-height:1.05;letter-spacing:-0.03em;color:var(--text-primary);margin-bottom:var(--space-6);min-height:1.15em;display:flex;align-items:center;justify-content:center}
.typewriter{display:inline}
.typewriter__cursor{display:inline-block;width:0;overflow:hidden;color:transparent;font-size:inherit;border-left:4px solid var(--text-primary);height:.85em;margin-left:6px;vertical-align:baseline;position:relative;top:.04em;animation:cursorBlink .8s steps(1) infinite;user-select:none;pointer-events:none}
.typewriter__cursor--solid{animation:none;border-color:var(--text-primary)}
@keyframes cursorBlink{0%,49%{border-color:var(--text-primary)}50%,100%{border-color:transparent}}
.hero__subtitle{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:520px;margin-bottom:var(--space-7)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero__visual{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero__logo-img{width:320px;height:320px;object-fit:contain;filter:drop-shadow(0 0 60px rgba(255,255,255,.06));transition:filter var(--transition-slow)}
.hero__logo-img:hover{filter:drop-shadow(0 0 80px rgba(255,255,255,.10))}
.hero__scroll-hint{position:absolute;bottom:var(--space-7);left:50%;transform:translateX(-50%);z-index:var(--z-base);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);opacity:.4;transition:opacity var(--transition-normal)}
.hero__scroll-hint:hover{opacity:.7}
.hero__scroll-mouse{width:24px;height:38px;border:2px solid var(--text-muted);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.hero__scroll-wheel{width:3px;height:8px;background-color:var(--text-muted);border-radius:var(--radius-full)}
.hero__scroll-text{font-family:var(--font-mono);font-size:.625rem;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}

/* 5. SECTION HEADER */
.section-header{text-align:center;max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:var(--space-8)}
.section-tag{display:inline-block;font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);background-color:var(--surface);padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--surface-border);margin-bottom:var(--space-5)}
.section-title{font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-primary);margin-bottom:var(--space-5)}
.section-desc{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary)}

/* 6. BUTONLAR */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);line-height:1;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;transition:all var(--transition-normal);position:relative;overflow:hidden}
.btn--primary{background:var(--gradient-accent);color:var(--text-inverse);border:1px solid rgba(255,255,255,.20);box-shadow:0 0 20px rgba(255,255,255,.06)}
.btn--primary:hover{color:var(--text-inverse);box-shadow:0 0 30px rgba(255,255,255,.10),0 4px 16px rgba(0,0,0,.30);transform:translateY(-1px);filter:brightness(1.05)}
.btn--primary:active{color:var(--text-inverse);transform:translateY(0);filter:brightness(.95)}
.btn--primary .btn__icon{color:var(--text-inverse);stroke:var(--text-inverse)}
.btn--primary:hover .btn__icon{color:var(--text-inverse);stroke:var(--text-inverse)}
.btn--secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--surface-border);box-shadow:none}
.btn--secondary:hover{background-color:var(--surface);border-color:var(--surface-border-hover);transform:translateY(-1px)}
.btn--secondary:active{transform:translateY(0);background-color:var(--surface-hover)}
.btn--sm{font-size:var(--text-caption);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}
.btn--lg{font-size:var(--text-body);padding:var(--space-4) var(--space-6);border-radius:var(--radius-md)}
.btn__icon{width:18px;height:18px;flex-shrink:0;transition:transform var(--transition-normal)}
.btn:hover .btn__icon{transform:translateX(3px)}
.btn__icon--left{order:-1}
.btn:hover .btn__icon--left{transform:translateX(0)}

/* 7. HİZMET KARTLARI */
.services-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.service-card{position:relative;padding:var(--space-6);background-color:var(--bg-tertiary);background-image:var(--gradient-card);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}
.service-card:hover{transform:translateY(-4px);border-color:var(--surface-border-hover);box-shadow:var(--shadow-card-hover)}
.service-card__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:var(--space-5);color:var(--text-primary);background-color:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-md)}
.service-card__icon svg{width:24px;height:24px}
.service-card__title{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-3)}
.service-card__desc{font-size:var(--text-small);line-height:var(--leading-relaxed);color:var(--text-secondary)}

/* 8. PROJE KARTLARI */
.projects-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6)}
.project-card{position:relative;display:flex;flex-direction:column;background-color:var(--bg-tertiary);border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal);cursor:pointer;width:100%}
.project-card:hover{transform:translateY(-4px);border-color:var(--surface-border-hover);box-shadow:var(--shadow-card-hover)}
.project-card__image{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background-color:var(--bg-elevated)}
.project-card__img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.project-card:hover .project-card__img{transform:scale(1.05)}
.project-card__badge{position:absolute;top:var(--space-3);left:var(--space-3);font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:var(--space-1) var(--space-3);background-color:rgba(15,16,15,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--text-primary)}
.project-card__status{position:absolute;top:var(--space-3);right:var(--space-3);font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:var(--space-1)}
.project-card__status--completed{background-color:rgba(15,16,15,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--status-success);border:1px solid rgba(138,155,138,.25)}
.project-card__status--active{background-color:rgba(15,16,15,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--status-active);border:1px solid rgba(138,143,155,.25)}
.project-card__status--planned{background-color:rgba(15,16,15,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--status-planned);border:1px solid rgba(155,151,138,.25)}
.project-card__status-dot{width:5px;height:5px;border-radius:50%;background-color:currentColor;flex-shrink:0}
.project-card__content{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);flex:1}
.project-card__title{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--text-primary);line-height:var(--leading-snug)}
.project-card__desc{font-size:var(--text-small);line-height:var(--leading-relaxed);color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.project-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3)}
.project-card__tag{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);color:var(--text-muted);background-color:var(--surface);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--surface-border)}
.project-card__footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--space-3) var(--space-5);border-top:1px solid var(--surface-border)}
.project-card__link{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--text-secondary);transition:color var(--transition-fast),gap var(--transition-normal)}
.project-card__link:hover{color:var(--text-primary);gap:var(--space-3)}
.project-card__link-icon{width:16px;height:16px;flex-shrink:0}

/* 8b. PROJE DETAY */
.project-detail{background-color:var(--bg-primary);border-top:1px solid var(--surface-border);animation:pdFadeIn .5s var(--ease-in-out) both}
@keyframes pdFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.project-detail[hidden]{display:none !important}
.project-detail__back{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--text-secondary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-7);cursor:pointer;transition:color var(--transition-fast),background-color var(--transition-fast)}
.project-detail__back:hover{color:var(--text-primary);background-color:var(--surface)}
.project-detail__back svg{flex-shrink:0}
.project-detail__content{display:flex;flex-direction:column;gap:var(--space-8)}
.pd-hero{display:grid;grid-template-columns:1fr;gap:var(--space-7)}
.pd-cover{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background-color:var(--bg-elevated);border:1px solid var(--surface-border)}
.pd-cover__img{width:100%;height:100%;object-fit:cover}
.pd-info{display:flex;flex-direction:column;gap:var(--space-4)}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.pd-meta__badge{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);background-color:var(--surface);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--surface-border)}
.pd-meta__status{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:var(--space-1)}
.pd-meta__status--completed{background-color:rgba(138,155,138,.15);color:var(--status-success);border:1px solid rgba(138,155,138,.25)}
.pd-meta__status--active{background-color:rgba(138,143,155,.15);color:var(--status-active);border:1px solid rgba(138,143,155,.25)}
.pd-meta__status--planned{background-color:rgba(155,151,138,.15);color:var(--status-planned);border:1px solid rgba(155,151,138,.25)}
.pd-meta__dot{width:5px;height:5px;border-radius:50%;background-color:currentColor;flex-shrink:0}
.pd-title{font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.pd-summary{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.pd-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pd-tags__item{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);color:var(--text-muted);background-color:var(--surface);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--surface-border)}
.pd-buttons{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-4)}
.pd-buttons .btn{font-size:var(--text-body-lg);font-weight:var(--weight-semibold);padding:var(--space-5) var(--space-8);border-radius:var(--radius-md);gap:var(--space-3);box-shadow:0 0 24px rgba(255,255,255,.08)}
.pd-buttons .btn:hover{box-shadow:0 0 40px rgba(255,255,255,.14),0 6px 20px rgba(0,0,0,.35);transform:translateY(-2px)}
.pd-buttons .btn:active{transform:translateY(0)}
.pd-buttons .btn__icon{width:22px;height:22px}
.pd-buttons .btn--dark{background:#0F100F;color:#FFFFFF;border:1px solid var(--surface-border);box-shadow:none;cursor:default;pointer-events:none}
.pd-buttons .btn--dark:hover{background:#0F100F;color:#FFFFFF;transform:none;filter:none;box-shadow:none}
.pd-body{max-width:800px}
.pd-body__heading{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-4)}
.pd-body__text{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary);white-space:pre-line}
.pd-details{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.pd-detail-card{padding:var(--space-5);background-color:var(--bg-tertiary);border:1px solid var(--surface-border);border-radius:var(--radius-lg)}
.pd-detail-card__label{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.pd-detail-card__value{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--text-primary)}
.pd-gallery{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.pd-gallery__item{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--surface-border);background-color:var(--bg-elevated)}
.pd-gallery__img{width:100%;height:auto;display:block}

/* 9. EKİP KARTLARI */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5)}
.team-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-7) var(--space-5) var(--space-6);background-color:var(--bg-tertiary);background-image:var(--gradient-card);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal);width:100%}
.team-card:hover{transform:translateY(-4px);border-color:var(--surface-border-hover);box-shadow:var(--shadow-card-hover)}
.team-card__avatar{position:relative;width:88px;height:88px;margin-bottom:var(--space-5);border-radius:50%;overflow:hidden;border:2px solid var(--surface-border);box-shadow:0 0 20px rgba(255,255,255,.04);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}
.team-card:hover .team-card__avatar{border-color:var(--surface-border-hover);box-shadow:0 0 30px rgba(255,255,255,.06)}
.team-card__avatar-img{width:100%;height:100%;object-fit:cover;background-color:var(--bg-elevated)}
.team-card__avatar-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--bg-elevated);font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--text-secondary)}
.team-card__name{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-3)}
.team-card__roles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-5)}
.team-card__role{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);background-color:var(--surface);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--surface-border)}
.team-card__socials{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}
.team-card__social{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--text-muted);border:1px solid var(--surface-border);border-radius:var(--radius-md);background-color:var(--surface);transition:color var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast)}
.team-card__social:hover{color:var(--text-primary);border-color:var(--surface-border-hover);background-color:var(--surface-hover);transform:scale(1.1)}
.team-card__social svg{width:16px;height:16px}

/* 10. CTA */
.cta-section{padding-top:var(--space-10);padding-bottom:var(--space-11)}
.cta-card{position:relative;padding:var(--space-9) var(--space-6);border-radius:var(--radius-xl);overflow:hidden;text-align:center;background-color:var(--bg-tertiary);border:1px solid transparent;background-image:var(--gradient-cta);background-origin:border-box;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(255,255,255,.02),var(--shadow-lg)}
.cta-card__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta-card__glow{position:absolute;width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 40%,transparent 70%);border-radius:50%;filter:blur(60px)}
.cta-card__content{position:relative;z-index:var(--z-base);display:flex;flex-direction:column;align-items:center;max-width:560px;margin-left:auto;margin-right:auto}
.cta-card__title{font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-primary);margin-top:var(--space-5);margin-bottom:var(--space-5)}
.cta-card__desc{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);margin-bottom:var(--space-7)}

/* 11. FOOTER */
.footer{position:relative;background-color:var(--bg-secondary);border-top:1px solid var(--surface-border)}
.footer__inner{display:grid;grid-template-columns:1fr;gap:var(--space-8);padding-top:var(--space-10);padding-bottom:var(--space-8)}
.footer__brand{max-width:320px}
.footer__logo{display:inline-flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);transition:opacity var(--transition-fast)}
.footer__logo:hover{opacity:.8}
.footer__logo-img{width:40px;height:40px;object-fit:contain;flex-shrink:0;border-radius:var(--radius-sm)}
.footer__brand-desc{font-size:var(--text-small);line-height:var(--leading-relaxed);color:var(--text-muted)}
.footer__column{display:flex;flex-direction:column;gap:var(--space-4)}
.footer__column-title{font-family:var(--font-display);font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary)}
.footer__links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__link{font-size:var(--text-small);color:var(--text-muted);transition:color var(--transition-fast);width:fit-content}
.footer__link:hover{color:var(--text-primary)}
.footer__socials{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__social-link{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-small);color:var(--text-muted);transition:color var(--transition-fast);width:fit-content}
.footer__social-link:hover{color:var(--text-primary)}
.footer__social-link svg{flex-shrink:0}
.footer__bottom{border-top:1px solid var(--surface-border)}
.footer__bottom-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding-top:var(--space-6);padding-bottom:var(--space-6);text-align:center}
.footer__copyright{font-size:var(--text-caption);color:var(--text-muted)}
.footer__note{font-size:var(--text-caption);color:var(--text-muted);opacity:.6}

/* 12. RESPONSIVE */
@media(min-width:640px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .project-card{width:calc(50% - var(--space-6) / 2)}
  .team-card{width:calc(50% - var(--space-5) / 2)}
  .footer__inner{grid-template-columns:1.5fr 1fr}
  .footer__bottom-inner{flex-direction:row;justify-content:space-between}
  .cta-card{padding:var(--space-10) var(--space-8)}
  .hero__logo-img{width:380px;height:380px}
  .pd-gallery{grid-template-columns:repeat(2,1fr)}
  .pd-details{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .team-card{width:calc(33.333% - var(--space-5) * 2 / 3)}
  .hero__grid{max-width:none;flex-direction:row;align-items:center;justify-content:center;gap:clamp(2rem,5vw,6rem);padding-top:0;padding-bottom:var(--space-10)}
  .hero__title{white-space:nowrap;font-size:clamp(2rem,4vw,4.5rem);justify-content:flex-start}
  .hero__text{text-align:left;flex:0 0 auto}
  .hero__subtitle{max-width:480px}
  .hero__actions{justify-content:flex-start}
  .hero__visual{flex:0 0 auto}
  .hero__logo-img{width:clamp(220px,30vw,520px);height:auto}
  .pd-hero{grid-template-columns:1fr 1fr;align-items:start}
}
@media(min-width:1024px){
  .navbar__nav{display:block}
  .navbar__cta{display:inline-flex}
  .hamburger{display:none}
  .project-card{width:calc(33.333% - var(--space-6) * 2 / 3)}
  .team-card{width:calc(25% - var(--space-5) * 3 / 4)}
  .footer__inner{grid-template-columns:1.5fr 1fr 1fr}
  .cta-card{padding:var(--space-11) var(--space-10)}
  .section{padding-top:var(--space-11);padding-bottom:var(--space-11)}
  .hero__title{letter-spacing:-0.035em}
  .hero__glow--1{width:800px;height:800px;top:-300px}
  .hero__glow--2{width:500px;height:500px;left:-150px}
  .hero__glow--3{width:450px;height:450px;right:-120px}
  .pd-gallery{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1280px){
  .section-header{max-width:720px}
  .hero__subtitle{max-width:520px}
}
@media(max-width:639px){
  .hero{padding-top:calc(var(--navbar-height-mobile) + var(--space-6))}
  .hero__grid{padding-top:var(--space-7);padding-bottom:var(--space-9)}
  .hero__text{align-items:center}
  .hero__title{line-height:1.12;letter-spacing:-0.02em;justify-content:center}
  .hero__subtitle{max-width:100%;margin-bottom:var(--space-6)}
  .hero__actions{justify-content:center}
  .hero__logo-img{width:260px;height:260px}
  .typewriter__cursor{border-left-width:3px;margin-left:4px}
  .pd-title{font-size:var(--text-h2)}
  .pd-buttons .btn{font-size:var(--text-body);padding:var(--space-4) var(--space-6);width:100%;justify-content:center}
  .project-card{width:100%}
  .team-card{width:100%}
}
@media(max-width:379px){
  .hero__actions{flex-direction:column;width:100%}
  .hero__actions .btn{width:100%}
  .hero__logo-img{width:200px;height:200px}
  .hero__scroll-hint{display:none}
  .cta-card{padding:var(--space-7) var(--space-4)}
}