html {
    scroll-behavior: smooth; 
}
 * { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}   
 body {font-family: 'figtree', sans-serif;}
 img {max-width: 100%;}

 section{
  padding: 110px 0;
  background: transparent; 
}


.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title {margin-bottom: 30px;
text-align: center;
color: #fff;
font-size: 30px;
transition:all 0.5s ease;}
.section-title:hover {color: #880202;}

/*kolayca renk seçeyim diye böyle yaptım hocam */
:root {
    --gold1: #FFD700;
    --gold2: #FFA500;
    --anarenk : #880202;
    --arkaplan : #181818;
    --section: clamp(60px, 10vw, 120px);
    --bg0:#120b0b;
    --bg1:#241514;
    --text:#fdfdfd;
    --accent:#fcbc23;
    --danger:#880202;
    --stroke:rgba(255,255,255,.12);
}

header {
    background: #181818;
    border-bottom: 1px solid #181818;
    position: center;
    width: 100%;
    z-index: 5;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    width: 90%;
    padding: 10px 100px;
}
.nav-links {
    display: flex;
}
.nav-links li a{
    margin-left: 15px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
.nav-links li a:hover {
    background: #880202;
}
.logo h2 a{
    color : #fff;
    font-weight: 900;
    
}

@keyframes goldShine {
    0%,100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}
.accent{
  display: inline-block; /* background-clip için şart */
  font-weight: 900;

  background: linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold1));
  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: goldShine 4s linear infinite;
}

/*anasayfa*/
.inner_anasayfa {
    display: flex-start;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    width: 70%;
    padding: 100px;
    min-height: 100vh;
    color: #fff;
}
.child_anasayfa {
    flex-basis: 40%;
}

.child_anasayfa h1  {

    font-weight: 900;
    background: linear-gradient(135deg,var(--gold1),var(--gold2),var(--gold1));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 4s linear infinite goldShine;
}
.child_anasayfa p {
    margin: 40px 0;
    color: #CCCCCC;
    font-size: 18px;
    line-height: 1.6;
}
.child_anasayfa h1 .span_child {
    display: inline-block;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 40px; 
    font-weight: 850;
    margin-left: 10px;
}

.btn {
    display: inline-block;
    padding: 12px 75px;
    background: #880202;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(136,3,2,0.4);
    transition: all 0.3s ease-in-out;
    border: 1px solid #880202;
    cursor: pointer;
}
.btn:hover {
    background: red;
    color: #880202;
    box-shadow: 0 5px 15px rgba(136,3,2,0.7);
}
html, body{
  height: 100%;
  margin: 0;
  background: transparent;
}

.btn {
    display: inline-block;
    background-color: #882022;
    color: white;
    padding: 16px 50px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(136, 32, 34, 0.4);
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #a02828;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(136, 32, 34, 0.6);
}

/* arkaplan geçişli renk */
body{
  color: var(--text);
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 25% 10%, rgba(252,188,35,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 40%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 900px at 20% 90%, rgba(136,2,2,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

/* İlk section bozduğu için override yaptım hatırla */
.hero > section{
  padding: 0 !important;
  background: transparent !important;
}

.wrap{
  width:min(1200px, 92vw);
  margin:0 auto;
  padding:28px 0 64px;
}

/* ana header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background: transparent !important;
  border-bottom: 0 !important;
}

/* logo ve kalınlaştırma alacran projects */
.brand{
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:900;
  letter-spacing:.2px;
  font-size: 22px;
}
.logo{
  width:44px;
  height:44px;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logo img{ width:100%; height:100%; object-fit:cover; }

/*nav */
nav{
  display:flex;
  align-items:center;
  gap:28px;
  color:rgba(255,255,255,.75);
  font-weight:600;
}
nav a{ color:inherit; text-decoration:none; }
nav a:hover{ color:#fff; }

/* iletişim butonu */
.pill{
  padding:12px 18px;
  border-radius:16px;
  background:var(--danger);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 18px 40px rgba(136,2,2,.30);
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:44px;
  align-items:center;
  margin-top:54px;
}

/*başlık*/
.hero h1{
  margin:0 0 10px;
  font-size: clamp(40px, 5vw, 76px);
  line-height:1.0;
  letter-spacing:-1.5px;
  font-weight:900;
}
.accent{
  display:block;
  color:var(--accent);
  margin-top:10px;
}

.lead{
  margin:22px 0 0;
  max-width:56ch;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.7;
}
.lead b{ color:#fff; }
.lead .hl{ color:var(--accent); font-weight:800; }
.lead .red{ color:#ff5a5a; font-weight:800; }

.cta{
  display:flex;
  gap:16px;
  margin-top:30px;
  flex-wrap:wrap;
}

/* ikinci buton birincinin üstüne yaptım*/
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 22px;
  border-radius:18px;
  font-weight:900;
  text-decoration:none;
  border:1px solid transparent;
  user-select:none;
  transition: all .25s ease;
}
.btn-primary{
  background:var(--danger);
  color:#fff;
  box-shadow:0 18px 40px rgba(136,2,2,.35);
}
.btn-primary:hover{
  filter:brightness(1.06);
  transform: translateY(-2px);
}
.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--stroke);
  color:#fff;
}
.btn-ghost:hover{
  background:rgba(255,255,255,.07);
  transform: translateY(-2px);
}

/*cam kutucuklar */
.visual{ position:relative; height:460px; }
.glass{
  position:absolute;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(500px 200px at 20% 10%, rgba(255,255,255,.14), transparent 55%);
  pointer-events:none;
  opacity:.75;
}
.g1{ width:360px; height:360px; right:70px; top:10px; }
.g2{ width:420px; height:320px; right:0; top:110px; background:rgba(255,255,255,.03); }
.g3{ width:320px; height:260px; right:30px; bottom:0; opacity:.75; }

@media (max-width: 900px){
  nav{ display:none; }
  .hero{ grid-template-columns:1fr; }
  .visual{ height:360px; }
  .g1{ right:20px; }
  .g2{ right:-10px; }
}
/* nav büyüme efekti */
nav a{
  display: inline-flex;           
  align-items: center;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
  transform-origin: center;
}

nav a:hover{
  transform: scale(1.08);
  color: #fff;
}

/* iletişim kutusu efektler*/
.pill{
  display: inline-flex;
  align-items: center;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  transform-origin: center;
}

.pill:hover{
  transform: scale(1.06);
  filter: brightness(1.06);
  box-shadow: 0 26px 60px rgba(136,2,2,.45);
}

nav a:active,
.pill:active{
  transform: scale(0.98);
}
nav a{
  padding: 10px 12px;
  border-radius: 12px;
}

nav a:hover{
  background: rgba(255,255,255,.06);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform .18s ease;
  transform-origin: left center;
}

.brand:hover{
  transform: scale(1.06);
}
/* kutucuk aniasyonları */
@keyframes floaty {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(-14px) translateX(6px) rotate(0.6deg); }
  100% { transform: translateY(0) translateX(0) rotate(0deg); }
}

@keyframes floaty2 {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(10px) translateX(-6px) rotate(-0.6deg); }
  100% { transform: translateY(0) translateX(0) rotate(0deg); }
}

/* kutucuk hareket */
.glass{
  will-change: transform;
}
.glass.g1{ animation: floaty 6s ease-in-out infinite; }
.glass.g2{ animation: floaty2 8s ease-in-out infinite; }
.glass.g3{ animation: floaty 10s ease-in-out infinite; }


main, .wrap{
  background: transparent !important;
}
.section-fade{
  position: relative;
  isolation: isolate;
}
.section-fade > *{ position: relative; z-index: 2; }

.section-fade::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-140px;
  height:220px;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(18,11,11,0),
    rgba(18,11,11,.9)
  );
}
/* hakkımda sayfası*/

.about-page{
  padding-top: 80px;
}

.about-hero{
  max-width: 900px;
  margin: 0 auto 60px;
}

.about-hero h1{
  margin: 0 0 18px;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 900;
  line-height: 1.05;
}

.about-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}

@media (max-width: 900px){
  .about-cards{
    grid-template-columns: 1fr;
  }
}

/* aktif menü linki */
nav a.active{
  color: var(--gold2);
}

body.about-bg{
  background: #181818 !important;
  color: #fff;
}

body.about-bg::before,
body.about-bg::after,
body.about-bg .about-hero::before{
  display:none !important;
}

body.about-bg nav a.active{
  color: var(--gold2, #fcbc23);
}

.about-min{
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 60px 0 80px;
}

.about-min-hero{
  padding: 24px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.kicker{
  letter-spacing: .28em;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
}

.about-min-title{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.08;
  font-weight: 900;
}

.about-min-title .name{
  color: var(--gold2, #fcbc23);
}

.about-min-desc{
  margin: 0;
  max-width: 70ch;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.8;
}

/* buton */
.about-min-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.minbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
  transition: transform .16s ease, background .16s ease, filter .16s ease;
}

.minbtn:hover{
  transform: scale(1.03);
  background: rgba(255,255,255,.07);
}

.minbtn-primary{
  background: #b30000;
  border-color: rgba(255,0,0,.25);
}
.minbtn-primary:hover{
  filter: brightness(1.06);
}

.minbtn-ghost{
  background: rgba(255,255,255,.03);
}

/* kart */
.about-min-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  padding: 26px 0;
}

.mincard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 16px;
}

.mincard-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.mincard-text{
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}


.about-min-h2{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
}
/* proje sayfası html */

.projects-min{
  width: min(1000px, 92vw);
  margin: 0 auto;
  padding: 60px 0 80px;
}

/* hero */
.projects-hero{
  padding: 24px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.projects-title{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 900;
}

.projects-title .name{
  color: var(--gold2, #fcbc23);
}

.projects-desc{
  max-width: 70ch;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.8;
}

.projects-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  padding-top: 26px;
}

/* kart */
.project-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 18px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Üst */
.project-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.project-head h3{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
}

.tag{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
}

.project-text{
  margin: 14px 0 18px;
  color: rgba(255,255,255,.70);
  line-height: 1.6;
  font-size: 15px;
}

/* Buton */
.project-actions{
  display:flex;
  justify-content: flex-end;
}

@media (max-width: 820px){
  .projects-grid{
    grid-template-columns: 1fr;
  }
}
/* virüs total sayfası için*/

.vt-min{
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 60px 0 80px;
}

.vt-hero{
  padding: 24px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.vt-title{
  margin: 0 0 12px;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 900;
}

.vt-title .name{
  color: var(--gold2, #fcbc23);
}

.vt-desc{
  margin: 0;
  max-width: 75ch;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.8;
}

.vt-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.vt-block{
  padding-top: 26px;
}

.vt-h2{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
}

.vt-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 16px;
}

.vt-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

.vt-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vt-mini{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 14px;
}

.vt-mini-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.vt-mini-text{
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}

.kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kv:first-child{ border-top: 0; padding-top: 0; }
.k{
  color: rgba(255,255,255,.65);
  font-weight: 800;
}
.v{
  color: rgba(255,255,255,.85);
  font-weight: 700;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  word-break: break-all;
}

@media (max-width: 820px){
  .vt-grid{ grid-template-columns: 1fr; }
  .kv{ grid-template-columns: 1fr; }
}

/* iletişim sayfası */

.contact-min{
  width: min(900px, 92vw);
  margin: 0 auto;
  padding: 60px 0 80px;
}

/* hero */
.contact-hero{
  padding: 24px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.contact-title{
  margin: 0 0 12px;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 900;
}

.contact-title .name{
  color: var(--gold2, #fcbc23);
}

.contact-desc{
  max-width: 70ch;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.8;
}

.contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  padding-top: 26px;
}

/* kartlar */
.contact-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 18px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-card-title{
  font-weight: 900;
  font-size: 18px;
}

.contact-card-text{
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}

.contact-highlight{
  color: #fff;
  font-weight: 800;
}
.contact-foot{
  padding-top: 24px;
}

/* Mobil */
@media (max-width: 820px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}
/* Sağolasınız hocam html css öğrendim 2 haftadır bunu yapmak için :D */