/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  background-image: url('wallpapy.jpg');
}
.about-bg {
  background-color: white;
  background-image: url('hakkındasevdigim.jpg');
}
@font-face {
  font-family: 'AvantGarde-CondDemi';
  src: url('fonts/itc-avant-garde-gothic-std-demi-condensed-opentype_ufonts.com.otf') format('opentype');
}
h1 {
  font-family: 'AvantGarde-CondDemi', sans-serif;
  color: rgb(135, 94, 4);
  font-size: 4vw;
  text-shadow: 
    0.03em 0.03em 0 rgb(17, 204, 80),
    -0.03em -0.03em 0 rgb(17, 204, 80),
    0.03em -0.03em 0 rgb(17, 204, 80),
    -0.03em 0.03em 0 rgb(17, 204, 80),
    0em 0.03em 0 rgb(17, 204, 80),
    0em -0.03em 0 rgb(17, 204, 80),
    0.03em 0em 0 rgb(17, 204, 80),
    -0.03em 0em 0 rgb(17, 204, 80);
}
.intro-box {
  max-width: 700px;
  margin: 40px auto;
  padding: 30px 40px;
  background-color: rgba(20, 5, 5, 0.75); /* koyu, yarı saydam - kilim üstünde okunsun diye */
  border: 3px solid rgb(17, 204, 80);
  border-image: repeating-linear-gradient(
    45deg,
    rgb(17, 204, 80) 0 10px,
    rgb(139, 20, 20) 10px 20px
  ) 3;
  box-shadow: 0 0 20px rgba(17, 204, 80, 0.4);
}

.intro-box p {
  font-family: 'IBM Plex Mono', monospace;
  color: #f0e6d2;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 25px;
}


.pc-warning-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 2px solid #000;
  padding: 20px 30px;
  text-align: center;
  z-index: 999;
  box-shadow: 4px 4px 0px #000;
  display: none; 
}

.pc-warning-box p {
  margin: 0 0 15px 0;
  font-family: 'IBM Plex Mono', monospace;
}
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.tp-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  background: repeating-linear-gradient(
    135deg,
    #111 0 12px,
    #f0e6d2 12px 24px
  ); /* Red Room zemin deseni */
  color: transparent; /* düz metni gizle, üstüne yeşil overlay koyacağız */
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-decoration: none;
  border: 2px solid rgb(17, 204, 80);
  overflow: hidden;
  transition: filter 0.2s ease;
}

.tp-link span {
  position: relative;
  z-index: 2;
  color: rgb(17, 204, 80);
  background-color: rgba(0, 0, 0, 0.65);
  padding: 4px 10px;
  text-shadow: 0 0 4px rgba(17, 204, 80, 0.6);
}

.tp-link:hover {
  filter: brightness(1.3);
}
.pc-warning-box button {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 6px 20px;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.pc-warning-box button:hover {
  background-color: #333;
}

/* Sadece telefon ekranlarında (768px altı) göster */
@media screen and (max-width: 768px) {
  .pc-warning-box {
    display: block;
  }
}
.pine-tree {
  position: fixed;
  bottom: 0;
  height: 60vh;        /* ekran yüksekliğinin %60'ı kadar */
  z-index: -1;          /* içeriğin arkasında kalsın */
  pointer-events: none; /* tıklamaları engellemesin */
}

.pine-left {
  left: 0;
}

.pine-right {
  right: 0;
  transform: scaleX(-1); /* sağdaki ağacı yatayda ters çevirir, simetrik dursun diye */
}

@media screen and (max-width: 768px) {
  .pine-tree {
    display: none;
  }
}
.page-404 {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
}
.home-link {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 10;
  width: 160px; /* .tp-link'in genişliği sabit olmadığı için burada belirtiyoruz */
}
.home-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* eskiden 1fr 2fr 1fr idi, ortayı büyüttük */
  gap: 20px;
  max-width: 1200px; /* eskiden 1100px */
  margin: 30px auto;
  align-items: start;
}
.gif-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
.list-box {
  background-color: rgba(0, 0, 0, 0.85);
  border: 3px solid rgb(17, 204, 80);
  border-image: repeating-linear-gradient(
    45deg,
    rgb(17, 204, 80) 0 10px,
    rgb(139, 20, 20) 10px 20px
  ) 3;
  padding: 30px 40px;
  color: #f0e6d2;
  font-family: 'IBM Plex Mono', monospace;
  min-height: 400px; /* eskisi çok kısaydı, yüksekliği artırdık */
}
.list-box ul {
  padding-left: 20px;
  line-height: 1.8;
}

/* dar ekranda sütunlar alt alta düşsün */
@media screen and (max-width: 768px) {
  .about-layout {
    grid-template-columns: 1fr;
  }
}
.title-box {
  max-width: 700px;
  margin: 30px auto 20px auto;
  padding: 15px 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 3px solid rgb(17, 204, 80);
  border-image: repeating-linear-gradient(
    45deg,
    rgb(17, 204, 80) 0 10px,
    rgb(139, 20, 20) 10px 20px
  ) 3;
  text-align: center;
}

.title-box h1 {
  margin: 0;
  font-size: 4vw; /* mevcut 6vw'den küçülttüm, kutunun içine daha rahat sığsın diye — istersen geri büyüt */
}