:root {

     --bg: #07070a;
     --bg-soft: #0c0c10;

     --card: #111116;
     --card-hover: #17171d;

     --text: #f5f5f7;
     --muted: #96969f;

     --border: rgba(255, 255, 255, .09);

     --purple: #8b5cf6;
     --purple-light: #b39aff;

     --blue: #38bdf8;

     --green: #22c55e;

     --max: 1180px;

 }


 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }


 html {
     scroll-behavior: smooth;
 }


 body {

     background:

         radial-gradient(circle at 80% -10%,
             rgba(139, 92, 246, .18),
             transparent 35%),

         radial-gradient(circle at 0% 30%,
             rgba(56, 189, 248, .07),
             transparent 28%),

         var(--bg);

     color: var(--text);

     font-family: "DM Sans", sans-serif;

     line-height: 1.6;

 }


 body::before {

     content: "";

     position: fixed;

     inset: 0;

     pointer-events: none;

     opacity: .025;

     background-image:
         linear-gradient(rgba(255, 255, 255, .5) 1px,
             transparent 1px),
         linear-gradient(90deg,
             rgba(255, 255, 255, .5) 1px,
             transparent 1px);

     background-size: 60px 60px;

     mask-image: linear-gradient(to bottom,
             black,
             transparent 70%);

 }


 /* =========================================
           WATERMARK (arka plan silik görsel)
        ========================================= */

 .watermark-bg {

     position: fixed;

     inset: 0;

     z-index: -2;

     pointer-events: none;

     background-image: url("images/ataturk.jpg");

     background-position: center 15%;

     background-repeat: no-repeat;

     background-size: min(60vw, 640px);

     opacity: .06;

     filter: grayscale(1) contrast(1.05);

     mix-blend-mode: luminosity;

 }


 a {
     color: inherit;
     text-decoration: none;
 }


 a:focus-visible,
 button:focus-visible {

     outline: 2px solid var(--purple-light);

     outline-offset: 3px;

     border-radius: 4px;

 }


 .reveal {

     opacity: 0;

     transform: translateY(18px);

     transition: opacity .6s ease, transform .6s ease;

 }


 .reveal.in-view {

     opacity: 1;

     transform: none;

 }


 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {

         animation-duration: .01ms !important;

         animation-iteration-count: 1 !important;

         transition-duration: .01ms !important;

         scroll-behavior: auto !important;

     }

 }


 .container {

     width: min(calc(100% - 40px),
             var(--max));

     margin: auto;

 }


 /* =========================================
           HEADER
        ========================================= */

 header {

     position: sticky;

     top: 0;

     z-index: 1000;

     background:
         rgba(7, 7, 10, .78);

     backdrop-filter: blur(20px);

     border-bottom:
         1px solid var(--border);

 }


 .nav {

     min-height: 72px;

     display: flex;

     align-items: center;

     justify-content: space-between;

     gap: 25px;

 }


 .logo {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size: 24px;

     font-weight: 700;

     letter-spacing: -1.5px;

     white-space: nowrap;

 }


 .logo span {
     color: var(--purple-light);
 }


 nav {

     display: flex;

     align-items: center;

     gap: 25px;

 }


 nav a {

     color: var(--muted);

     font-size: 13px;

     transition: .25s;

 }


 nav a:hover {
     color: white;
 }


 .linkedin {

     border:
         1px solid var(--border);

     padding:
         8px 15px;

     border-radius: 999px;

     font-size: 12px;

     transition: .25s;

     white-space: nowrap;

 }


 .linkedin:hover {

     border-color:
         rgba(139, 92, 246, .6);

     background:
         rgba(139, 92, 246, .12);

 }


 .nav-linkedin {

     display: none;

 }


 .nav-toggle {

     display: none;

     flex-direction: column;

     justify-content: center;

     align-items: center;

     gap: 5px;

     width: 38px;

     height: 38px;

     border: 1px solid var(--border);

     border-radius: 8px;

     background: transparent;

     cursor: pointer;

     flex-shrink: 0;

 }


 .nav-toggle span {

     width: 16px;

     height: 1.5px;

     background: var(--text);

     transition: .25s;

 }


 .nav-toggle[aria-expanded="true"] span:nth-child(1) {
     transform: translateY(6.5px) rotate(45deg);
 }

 .nav-toggle[aria-expanded="true"] span:nth-child(2) {
     opacity: 0;
 }

 .nav-toggle[aria-expanded="true"] span:nth-child(3) {
     transform: translateY(-6.5px) rotate(-45deg);
 }


 /* =========================================
           HERO
        ========================================= */

 .hero {

     padding:
         105px 0 120px;

 }


 .hero-grid {

     display: grid;

     grid-template-columns:
         1.25fr .75fr;

     align-items: center;

     gap: 80px;

 }


 .eyebrow {

     color:
         var(--purple-light);

     font-size: 11px;

     font-weight: 700;

     letter-spacing: 2.5px;

     margin-bottom: 22px;

 }


 .hero h1 {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size:
         clamp(48px, 6vw, 78px);

     line-height:
         1.02;

     letter-spacing:
         -4px;

     max-width:
         850px;

 }


 .hero h1 em {

     font-style: normal;

     background:
         linear-gradient(90deg,
             var(--purple-light),
             var(--blue));

     -webkit-background-clip: text;

     background-clip: text;

     color: transparent;

 }


 .hero-text {

     max-width: 680px;

     margin-top: 30px;

     color: var(--muted);

     font-size: 17px;

 }


 .actions {

     display: flex;

     gap: 12px;

     margin-top: 34px;

 }


 .button {

     display: inline-flex;

     align-items: center;

     justify-content: center;

     padding:
         13px 20px;

     border-radius: 10px;

     font-size: 13px;

     font-weight: 600;

     transition: .25s;

 }


 .button.primary {

     background: white;

     color: #111;

 }


 .button.primary:hover {

     transform:
         translateY(-3px);

     box-shadow:
         0 15px 40px rgba(255, 255, 255, .12);

 }


 .button.secondary {

     border:
         1px solid var(--border);

     color: #ddd;

 }


 .button.secondary:hover {

     background:
         var(--card);

     border-color:
         rgba(255, 255, 255, .18);

 }


 /* =========================================
           PROFILE
        ========================================= */

 .hero-profile {

     display: flex;

     flex-direction: column;

     align-items: center;

 }


 .profile-wrapper {

     position: relative;

 }


 .profile-wrapper::before {

     content: "";

     position: absolute;

     inset: -35px;

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(139, 92, 246, .20),
             transparent 65%);

     z-index: -1;

 }


 .profile-image {

     width: 280px;

     height: 280px;

     padding: 6px;

     border-radius: 50%;

     background:
         linear-gradient(135deg,
             var(--purple),
             var(--blue));

     box-shadow:
         0 0 80px rgba(139, 92, 246, .18);

 }


 .profile-image img {

     width: 100%;

     height: 100%;

     object-fit: cover;

     border-radius: 50%;

     border:
         5px solid var(--bg);

 }


 .profile-info {

     margin-top: 25px;

     display: flex;

     flex-direction: column;

     align-items: center;

     text-align: center;

 }


 .status {

     display: flex;

     align-items: center;

     gap: 8px;

     padding:
         7px 13px;

     border:
         1px solid var(--border);

     background:
         rgba(255, 255, 255, .025);

     border-radius: 999px;

     color: #ccc;

     font-size: 11px;

 }


 .dot {

     width: 7px;

     height: 7px;

     border-radius: 50%;

     background:
         var(--green);

     box-shadow:
         0 0 12px var(--green);

     animation: pulse-dot 2.4s ease-in-out infinite;

 }


 @keyframes pulse-dot {

     0%, 100% {
         box-shadow: 0 0 12px var(--green);
     }

     50% {
         box-shadow: 0 0 4px var(--green);
     }

 }


 .profile-info strong {

     margin-top: 13px;

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size: 22px;

 }


 .profile-role {

     color: var(--muted);

     font-size: 12px;

     margin-top: 4px;

 }


 /* =========================================
           SECTIONS
        ========================================= */

 .section {

     padding:
         105px 0;

     border-top:
         1px solid var(--border);

 }


 .section-label {

     color:
         var(--purple-light);

     font-size: 10px;

     font-weight: 700;

     letter-spacing: 2px;

     margin-bottom: 17px;

 }


 .section h2 {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size:
         clamp(34px, 4vw, 52px);

     line-height:
         1.07;

     letter-spacing:
         -2.5px;

 }


 /* =========================================
           ABOUT
        ========================================= */

 .two-col {

     display: grid;

     grid-template-columns:
         1fr 1fr;

     gap: 85px;

 }


 .copy {

     color:
         var(--muted);

     font-size: 16px;

 }


 .copy p {

     margin-bottom:
         20px;

 }


 .skills {

     display: flex;

     flex-wrap: wrap;

     gap: 8px;

     margin-top: 25px;

 }


 .skill {

     padding:
         7px 12px;

     border:
         1px solid var(--border);

     border-radius: 999px;

     color: #ccc;

     background:
         rgba(255, 255, 255, .025);

     font-size: 11px;

 }


 /* =========================================
           POSTS
        ========================================= */

 .posts-section {

     background:
         var(--bg-soft);

 }


 .section-head {

     display: flex;

     align-items: end;

     justify-content: space-between;

     gap: 30px;

     margin-bottom: 40px;

 }


 .section-head>span {

     color:
         var(--muted);

     font-size: 12px;

 }


 .posts {

     display: grid;

     grid-template-columns:
         repeat(3, 1fr);

     gap: 18px;

 }


 .post {

     position: relative;

     min-height: 270px;

     padding: 27px;

     overflow: hidden;

     border:
         1px solid var(--border);

     border-radius: 18px;

     background:
         var(--card);

     transition:
         transform .3s,
         border-color .3s,
         background .3s;

 }


 .post-expand {

     grid-column: 1 / -1;

     min-height: 0;

     overflow: visible;

     padding-bottom: 80px;

 }


 .post-list {

     list-style: none;

     counter-reset: step;

     display: grid;

     grid-template-columns: repeat(2, 1fr);

     gap: 10px 30px;

     margin-top: 22px;

 }


 .post-list li {

     position: relative;

     padding-left: 30px;

     color: var(--muted);

     font-size: 13px;

     counter-increment: step;

 }


 .post-list li::before {

     content: counter(step);

     position: absolute;

     left: 0;

     top: 0;

     width: 20px;

     height: 20px;

     display: flex;

     align-items: center;

     justify-content: center;

     border-radius: 50%;

     background: rgba(139, 92, 246, .14);

     color: var(--purple-light);

     font-size: 10px;

     font-weight: 700;

 }


 .post::before {

     content: "";

     position: absolute;

     width: 180px;

     height: 180px;

     right: -100px;

     top: -100px;

     border-radius: 50%;

     background:
         var(--purple);

     opacity: .06;

 }


 .post:hover {

     transform:
         translateY(-6px);

     background:
         var(--card-hover);

     border-color:
         rgba(139, 92, 246, .45);

 }


 .post-category {

     color:
         var(--purple-light);

     font-size: 9px;

     font-weight: 700;

     letter-spacing: 1.6px;

     text-transform: uppercase;

     margin-bottom: 18px;

 }


 .post h3 {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size: 21px;

     line-height: 1.25;

     margin-bottom: 12px;

 }


 .post-description {

     color:
         var(--muted);

     font-size: 13px;

 }


 .post-footer {

     position: absolute;

     left: 27px;

     right: 27px;

     bottom: 22px;

     display: flex;

     justify-content: space-between;

     padding-top: 15px;

     border-top:
         1px solid var(--border);

     color:
         var(--muted);

     font-size: 11px;

 }


 .post-footer a {

     color: white;

     font-weight: 600;

 }


 .post-footer a:hover {

     color:
         var(--purple-light);

 }


 /* =========================================
           GITHUB
        ========================================= */

 .github-head {

     display: flex;

     align-items: end;

     justify-content: space-between;

     gap: 30px;

     margin-bottom: 40px;

 }


 .github-grid {

     display: grid;

     grid-template-columns:
         repeat(3, 1fr);

     gap: 18px;

 }


 .github-card {

     padding: 27px;

     border:
         1px solid var(--border);

     border-radius: 18px;

     background:
         linear-gradient(145deg,
             rgba(255, 255, 255, .035),
             rgba(255, 255, 255, .01));

     transition: .3s;

 }


 .github-card:hover {

     transform:
         translateY(-6px);

     border-color:
         rgba(139, 92, 246, .6);

     background:
         var(--card-hover);

 }


 .repo-top {

     display: flex;

     align-items: center;

     justify-content: space-between;

     margin-bottom: 24px;

 }


 .repo-icon {

     font-size: 23px;

 }


 .repo-lang {

     padding:
         5px 9px;

     border-radius: 999px;

     background:
         rgba(139, 92, 246, .12);

     color:
         var(--purple-light);

     font-size: 9px;

 }


 .github-card h3 {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size: 20px;

     margin-bottom: 9px;

 }


 .github-card p {

     color:
         var(--muted);

     font-size: 13px;

 }


 .repo-link {

     display: inline-block;

     margin-top: 23px;

     color:
         var(--purple-light);

     font-size: 12px;

     font-weight: 600;

 }


 .tech-list {

     display: flex;

     flex-wrap: wrap;

     gap: 8px;

     margin-top: 30px;

 }


 .tech-list span {

     padding:
         8px 13px;

     border:
         1px solid var(--border);

     border-radius: 999px;

     color:
         var(--muted);

     font-size: 11px;

 }


 /* =========================================
           PERSONAL
        ========================================= */

 .personal-section {

     background:
         radial-gradient(circle at 80% 50%,
             rgba(56, 189, 248, .07),
             transparent 30%);

 }


 .personal-grid {

     display: grid;

     grid-template-columns:
         repeat(3, 1fr);

     gap: 18px;

 }


 .personal-card {

     min-height: 190px;

     padding: 25px;

     border:
         1px solid var(--border);

     border-radius: 18px;

     background:
         var(--card);

     transition: .3s;

 }


 .personal-card:hover {

     transform:
         translateY(-6px);

     border-color:
         rgba(139, 92, 246, .45);

     background:
         var(--card-hover);

 }


 .personal-icon {

     font-size: 30px;

     margin-bottom: 18px;

 }


 .personal-card h3 {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size: 19px;

     margin-bottom: 8px;

 }


 .personal-card p {

     color:
         var(--muted);

     font-size: 13px;

 }


 .personal-card .card-link {

     display: inline-block;

     margin-top: 12px;

     color:
         var(--purple-light);

     font-size: 12px;

     font-weight: 600;

 }


 /* =========================================
           REPAIR
        ========================================= */

 .repair-section {

     background:
         var(--bg-soft);

 }


 .repair-list {

     display: grid;

     grid-template-columns:
         repeat(2, 1fr);

     gap: 11px;

     margin-top: 40px;

 }


 .repair-item {

     display: flex;

     align-items: center;

     justify-content: space-between;

     gap: 20px;

     padding:
         17px 19px;

     border:
         1px solid var(--border);

     border-radius: 12px;

     background:
         var(--card);

     transition: .25s;

 }


 .repair-item:hover {

     border-color:
         rgba(139, 92, 246, .5);

     background:
         var(--card-hover);

 }


 .repair-item span {

     color: #ddd;

     font-size: 13px;

 }


 .repair-item a {

     color:
         var(--purple-light);

     font-size: 11px;

     font-weight: 600;

     white-space: nowrap;

 }


 /* =========================================
           CONTACT
        ========================================= */

 .contact {

     padding:
         125px 0;

     background:

         radial-gradient(circle at 70% 40%,
             rgba(139, 92, 246, .16),
             transparent 30%),

         linear-gradient(135deg,
             rgba(139, 92, 246, .08),
             rgba(56, 189, 248, .04));

     border-top:
         1px solid var(--border);

 }


 .contact h2 {

     font-family:
         "Space Grotesk",
         sans-serif;

     font-size:
         clamp(38px, 5vw, 64px);

     line-height:
         1.04;

     letter-spacing:
         -3px;

     margin-bottom:
         35px;

 }


 /* =========================================
           FOOTER
        ========================================= */

 footer {

     padding:
         27px 0;

     border-top:
         1px solid var(--border);

     color:
         var(--muted);

     font-size: 11px;

 }


 .footer-inner {

     display: flex;

     justify-content: space-between;

 }


 /* =========================================
           MOBILE
        ========================================= */

 @media(max-width: 950px) {

     .nav-toggle {
         display: flex;
     }


     .nav>.linkedin:not(.nav-linkedin) {
         display: none;
     }


     nav#primary-nav {

         position: absolute;

         top: 100%;

         left: 0;

         right: 0;

         flex-direction: column;

         align-items: stretch;

         gap: 0;

         background: var(--bg-soft);

         border-bottom: 1px solid var(--border);

         max-height: 0;

         overflow: hidden;

         opacity: 0;

         transition: max-height .3s ease, opacity .25s ease;

     }


     nav#primary-nav.open {

         max-height: 400px;

         opacity: 1;

     }


     nav#primary-nav a {

         padding: 16px 20px;

         border-top: 1px solid var(--border);

         font-size: 14px;

     }


     .nav-linkedin {

         display: block;

         color: var(--purple-light);

     }


     .hero {
         padding:
             75px 0 90px;
     }


     .hero-grid {

         grid-template-columns: 1fr;

         gap: 55px;

     }


     .hero-profile {
         order: -1;
     }


     .profile-image {

         width: 225px;

         height: 225px;

     }


     .two-col {

         grid-template-columns: 1fr;

         gap: 35px;

     }


     .posts,
     .github-grid {

         grid-template-columns: 1fr;

     }


     .post-list {

         grid-template-columns: 1fr;

     }


     .personal-grid {

         grid-template-columns:
             repeat(2, 1fr);

     }


     .repair-list {

         grid-template-columns: 1fr;

     }


     .section-head,
     .github-head {

         align-items: flex-start;

         flex-direction: column;

         gap: 18px;

     }

 }


 @media(max-width: 600px) {

     .container {

         width:
             min(calc(100% - 28px),
                 var(--max));

     }


     .nav {
         min-height: 64px;
     }


     .linkedin {
         display: none;
     }


     .hero h1 {

         font-size: 43px;

         letter-spacing:
             -2.5px;

     }


     .hero-text {

         font-size: 15px;

     }


     .actions {

         flex-direction:
             column;

     }


     .button {

         width: 100%;

     }


     .section {

         padding:
             75px 0;

     }


     .section h2 {

         font-size: 35px;

     }


     .personal-grid {

         grid-template-columns:
             1fr;

     }


     .contact {

         padding:
             85px 0;

     }


     .contact h2 {

         font-size:
             39px;

     }


     .footer-inner {

         flex-direction:
             column;

         gap: 7px;

     }

 }