@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --pink:#e30c81;
  --pink-dark:#c20a6d;
  --text:#0f172a;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#ffffff;
}

a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

.glass-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
}
.nav .logo{
  display:flex;align-items:center;gap:12px;
}
.nav .logo img{height:40px}
.nav-links{display:flex;gap:28px;align-items:center;font-weight:600;color:#334155}
.nav-links a.active{color:var(--pink)}
.nav-links .pill{
  background: var(--pink);
  color:white;
  padding:10px 18px;
  border-radius:9999px;
  box-shadow:0 6px 16px rgba(227,12,129,.25);
}

.marquee-container{
  overflow:hidden;
  background:#fde7f3;
  border-top:1px solid rgba(227,12,129,.15);
  border-bottom:1px solid rgba(227,12,129,.15);
}
.marquee-content{
  display:inline-block;
  white-space: nowrap;
  padding:10px 0;
  font-weight:800;
  letter-spacing:1px;
  color:var(--pink);
  animation: marquee 25s linear infinite;
}
@keyframes marquee {
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}

.hero{
  padding:64px 0 56px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:48px;
  align-items:start;
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns: 1fr; gap:28px;}
}

.hero-title{
  font-size:64px;
  line-height:1;
  font-weight:800;
  margin:0 0 24px;
  color:var(--pink);
}
@media (max-width: 520px){
  .hero-title{font-size:44px;}
}

.service-list{display:flex;flex-direction:column;gap:14px}

.prism-border{
  position:relative;
  background:#fff;
  border-radius: 16px;
  padding: 18px 20px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.prism-border::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:16px;
  background: linear-gradient(135deg, #1e3a8a 0%, #ffffff 25%, #7e22ce 50%, #38bdf8 100%);
  z-index:-1;
}

.service-card{
  cursor:pointer;
  transition: all .25s ease;
  background:#fff;
  border:2px solid #3b82f6; /* ekrandaki mavi çerçeve */
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.service-card h3{margin:0;font-size:20px;font-weight:700;color:#0f172a}
.service-card p{margin:8px 0 0;color:#64748b;font-size:14px}

.service-card:hover{
  /* Hover: tüm kartı mor->mavi degrade boya (ekran görüntüsündeki gibi) */
  background: linear-gradient(90deg, rgba(240,171,252,.75) 0%, rgba(126,34,206,.55) 40%, rgba(59,130,246,.55) 100%);
  box-shadow: 0 14px 34px rgba(15,23,42,.14);
  border-color: rgba(59,130,246,.65);
}
.service-card:hover p{color: rgba(15,23,42,.65)}

.hero-image{
  position:relative;
}
.hero-image .img-wrap{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
}
.hero-image img{
  width:100%;
  height:600px;
  object-fit:cover;
  display:block;
}
@media (max-width:960px){
  .hero-image img{height:420px;}
}
.badge{
  position:absolute;
  right:-24px;
  bottom:-24px;
  background:var(--pink);
  color:#fff;
  padding:22px 26px;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(15,23,42,.18);
  text-align:center;
}
.badge .big{font-size:38px;font-weight:800;line-height:1}
.badge .small{font-size:12px;font-weight:700;opacity:.95;margin-top:6px}

.section{padding:56px 0}
.section h2{margin:0 0 18px;font-size:32px;font-weight:800}
.card{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.footer{padding:34px 0;border-top:1px solid rgba(15,23,42,.08);color:#64748b}

/* Social dock (sağdaki yuvarlak ikonlar) */
.social-dock{
  position:fixed;
  right:20px;
  bottom:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:1000;
}
.social-dock a{
  width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(227,12,129,.2);
  backdrop-filter: blur(12px);
  box-shadow:0 10px 30px rgba(15,23,42,.10);
  transition: all .2s ease;
}
.social-dock a:hover{
  transform: translateY(-2px);
  border-color: rgba(227,12,129,.5);
}
.social-dock svg{width:22px;height:22px;stroke:var(--pink)}

/* Admin UI (ekran görüntüsüne yakın) */
.admin-topbar{
  padding:16px 20px;
  font-weight:900;
  font-size:22px;
  color:var(--pink);
}
.admin-shell{max-width:1200px;margin:0 auto;padding:18px 20px 60px}
.admin-tabs{
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  display:flex;gap:20px;align-items:center;
  position:relative;
}
.admin-tabs a{
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  color:#0f172a;
}
.admin-tabs a.active{
  color:var(--pink);
  box-shadow: inset 0 -2px 0 var(--pink);
}
.admin-logout{
  position:absolute;right:12px;top:10px;
  font-weight:700;
  color:#2563eb;
}
.admin-card{margin-top:22px;padding:22px;border-radius:12px;border:1px solid rgba(15,23,42,.08);box-shadow:0 8px 24px rgba(15,23,42,.06);background:#fff}
.admin-card h3{margin:0 0 14px;font-size:22px}
.admin-input, .admin-textarea{
  width:100%;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
}
.admin-textarea{min-height:160px;resize:vertical}
.btn-primary{
  background:var(--pink);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:14px 26px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(227,12,129,.22);
  transition: all .2s ease;
}
.btn-primary:hover{background:var(--pink-dark);transform: translateY(-1px)}
.muted{color:#64748b;font-size:13px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 860px){.grid-2{grid-template-columns:1fr}}
.hr{height:1px;background:rgba(15,23,42,.08);margin:18px 0}
.badge-outline{
  border:2px solid rgba(227,12,129,.7);
  border-radius:14px;
  padding:16px;
}




/* --- CTA Call button (Hizmet detay) --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:16px; font-weight:800; text-decoration:none; border:1px solid rgba(0,0,0,.08); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2,6,23,.12); }
.btn-call { background: var(--pink); color: #fff; }

/* --- Works (Yaptığımız İşler) --- */
.works-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:10px;
}
@media (max-width: 980px){ .works-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .works-grid{ grid-template-columns: 1fr; } }

.work-tile{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.08);
  background: #0b1220;
  cursor:pointer;
  padding:0;
  width:100%;
  display:block;
  transition: transform .18s ease, box-shadow .18s ease;
}
.work-tile:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(2,6,23,.16); }
.work-tile img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02); }
.work-cap{
  position:absolute; inset:auto 10px 10px 10px;
  padding:10px 12px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(227,12,129,.92), rgba(35,99,235,.88));
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
.work-title{ font-weight:900; letter-spacing:.2px; }

/* --- Modal / Lightbox --- */
.modal{ position:fixed; inset:0; display:none; z-index:9999; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.62); backdrop-filter: blur(6px); }
.modal-card{
  position:relative;
  width:min(980px, calc(100% - 32px));
  margin: 18px auto;
  top: 6vh;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(2,6,23,.28);
}
.modal-card img{ width:100%; max-height: 68vh; object-fit: contain; background: #0b1220; display:block; }
.modal-x{
  position:absolute; top:10px; right:10px;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(2,6,23,.45);
  color:#fff; font-size:26px; line-height:1;
  cursor:pointer;
}
.modal-meta{ padding:14px 16px 18px; }
.modal-title{ font-weight:900; font-size:18px; color:#0f172a; margin-bottom:6px; }
.modal-desc{ color:#334155; line-height:1.7; white-space:pre-line; }



/* --- Admin helpers --- */
.admin-ok{
  background: rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.25);
  color:#14532d;
  padding:10px 12px;
  border-radius:16px;
  margin: 0 0 12px;
  font-weight:800;
}
.admin-err{
  background: rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  color:#7f1d1d;
  padding:10px 12px;
  border-radius:16px;
  margin: 0 0 12px;
  font-weight:800;
}
.admin-mini{
  background: rgba(148,163,184,.12);
  border:1px solid rgba(2,6,23,.08);
  color:#334155;
  padding:10px 12px;
  border-radius:16px;
}
.admin-label{
  display:block;
  margin: 10px 0 6px;
  font-weight:900;
  color:#0f172a;
}
.admin-row{ display:flex; gap:12px; flex-wrap:wrap; }
.admin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  background: var(--pink);
  color:#fff;
  font-weight:900;
  border:1px solid rgba(2,6,23,.08);
  cursor:pointer;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.admin-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(2,6,23,.12); filter:saturate(1.05); }
.admin-btn-sm{ padding:10px 12px; border-radius:14px; font-size:13px; }
.admin-btn-ghost{ background:#fff; color:#0f172a; }
.admin-btn-danger{ background: #ef4444; }
.admin-split{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 980px){ .admin-split{ grid-template-columns:1fr; } }
.admin-pane{ border:1px solid rgba(2,6,23,.08); border-radius:22px; padding:14px; background:#fff; }
.admin-list{ display:flex; flex-direction:column; gap:10px; }
.admin-item{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(2,6,23,.08);
  border-radius:18px;
  padding:10px;
}
.admin-thumb{
  width:54px; height:54px; border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(2,6,23,.08);
}