html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

:root{
  --bg:#1e1e2f;
  --panel:#1f1f31;
  --tile:#2b2b40;
  --gold:#f5d142;
  --gold-2:#ffd700;
  --green:#28a745;
  --white:#ffffff;
  --muted:rgba(255,255,255,.75);
  --hair:rgba(255,255,255,.10);
  --shadow:0 4px 10px rgba(0,0,0,.30);
  --shadow-soft:0 2px 5px rgba(0,0,0,.20);
}

body{
  background-image:url('/img/isimsehir.png');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color:var(--bg);
  font-family:Arial, sans-serif;
  color:var(--white);
  margin:60px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}

body::-webkit-scrollbar{ width:4px; }
body::-webkit-scrollbar-track{ background:#1c1c3b; border-radius:10px; }
body::-webkit-scrollbar-thumb{ background:var(--gold-2); border-radius:10px; transition:background .3s ease; }
body::-webkit-scrollbar-thumb:hover{ background:#f0c020; }

.header-image{ text-align:center; margin-bottom:30px; }
.header-image img{ max-width:150px; height:auto; display:inline-block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.7)); }

.howto-container{
  max-width:1100px;
  width:100%;
  margin:50px auto;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

.howto-section{
  background-color:var(--panel);
  padding:20px;
  border-radius:12px;
  box-shadow:var(--shadow);
  width:100%;
  max-width:600px;
  text-align:left;
  border:1px solid var(--hair);
}

.howto-section h1{
  text-align:center;
  color:var(--gold);
  margin-bottom:20px;
  letter-spacing:.2px;
}
.howto-section h2{
  color:var(--gold);
  margin:22px 0 14px;
  font-size:1.075rem;
  font-weight:800;
  padding-bottom:8px;
  border-bottom:1px dashed var(--hair);
}

.intro{
  background-color:var(--tile);
  padding:15px;
  border-radius:10px;
  box-shadow:var(--shadow-soft);
  margin-bottom:22px;
  line-height:1.55;
  border:1px solid var(--hair);
}

.steps,
.points,
.tips{
  list-style:none;
  padding-left:0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:12px 0 24px;
}

.steps li,
.points li,
.tips li{
  position:relative;
  background:rgba(255,255,255,.03);
  border:1px solid var(--hair);
  border-radius:10px;
  padding:12px 14px 12px 46px;
  box-shadow:var(--shadow-soft);
  transition:transform .12s ease, border-color .2s ease, background .2s ease;
  line-height:1.5;
}
.steps li:hover,
.points li:hover,
.tips li:hover{
  transform:translateY(-1px);
  border-color:rgba(255,215,0,.35);
  background:rgba(255,255,255,.045);
}

.steps{ counter-reset:step; }
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:999px;
  background:var(--gold);
  color:#1c1c3b; font-weight:900; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

.points li::before{
  content:'✔';
  position:absolute; left:14px; top:12px;
  color:var(--green); font-weight:900;
}

.tips li::before{
  content:'💡';
  position:absolute; left:12px; top:12px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));
}

.points strong, .steps strong, .tips strong{ color:var(--white); }
.points code, .steps code, .tips code{
  background:rgba(255,255,255,.08);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:.05rem .35rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em;
}

.example{
  background:var(--tile);
  border:1px solid var(--hair);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow-soft);
  margin:14px 0 6px;
}
.example h3{
  margin:0 0 8px;
  color:var(--gold);
  font-size:1rem;
  font-weight:800;
}
.example p, .example ul{ margin:6px 0; }
.example ul{
  list-style:none; padding-left:0; display:grid; gap:8px;
}
.example li{
  position:relative;
  padding-left:22px;
}
.example li::before{
  content:'•';
  position:absolute; left:6px; top:0.25em;
  color:var(--gold);
}

a{ color:var(--gold-2); font-weight:bold; text-decoration:none; transition:opacity .2s ease; }
a:hover{ opacity:.85; text-decoration:underline; }

@media (max-width: 600px){
  .howto-section{ padding:20px; }
  .howto-section h1{ font-size:1.6rem; }
  .steps, .points, .tips{ gap:8px; }
  .steps li, .points li, .tips li{ padding:12px 12px 12px 44px; }
}

@media (max-width: 440px){
  .howto-container{ max-width:80%; margin:20px auto; padding:10px; }
  .howto-section{ padding:16px; }
  .howto-section h1{ font-size:1.5rem; margin-bottom:15px; }
  .intro, .steps li, .points li, .tips li{ font-size:.94rem; }
  .steps li::before{ left:10px; }
  .points li::before{ left:12px; }
  .tips li::before{ left:10px; }
}

@media (max-width: 375px){
  .howto-container{ max-width:80%; margin:10px auto; padding:5px; }
  .howto-section{ padding:12px; }
  .howto-section h1{ font-size:1.3rem; }
  .intro{ padding:12px; }
  .steps li, .points li, .tips li{ font-size:.9rem; }
}