/* ============================================================
   ruhatcansecereli.com — bento grid
   Koyu lacivert zemin · mor/indigo + sıcak turuncu vurgu
   Fontlar: Syne (display) · Instrument Sans (gövde) · JetBrains Mono (sayı)
   ============================================================ */

:root {
  --bg: #0b0b16;
  --bg-deep: #07070f;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(160, 150, 255, 0.14);
  --border-bright: rgba(170, 160, 255, 0.38);

  --ink: #eceaf8;
  --ink-soft: #a7a3c4;
  --ink-faint: #6b678a;

  --violet: #8b7cf7;
  --violet-deep: #6a55e8;
  --violet-glow: rgba(124, 104, 245, 0.45);
  --amber: #f0915a;
  --amber-soft: rgba(240, 145, 90, 0.16);

  --r-lg: 28px;
  --r-md: 20px;

  --font-display: "Syne", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- atmosfer ---------- */

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60vw 50vh at 50% -8%, rgba(106, 85, 232, 0.22), transparent 60%),
    radial-gradient(40vw 40vh at 88% 70%, rgba(240, 145, 90, 0.07), transparent 65%),
    radial-gradient(45vw 45vh at 8% 85%, rgba(124, 104, 245, 0.1), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- bento grid ---------- */

.bento {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.05fr 1fr;
  grid-template-rows: 96px 330px 220px 200px;
  grid-template-areas:
    "intro hero  hero social"
    "intro hero  hero stat1"
    "proj  stat2 cta  digest"
    "proj  lessons lessons digest";
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px);
}

.card--intro    { grid-area: intro; }
.card--hero     { grid-area: hero; }
.card--social   { grid-area: social; }
.card--stat     { grid-area: stat1; }
.card--stat-alt { grid-area: stat2; }
.card--projects { grid-area: proj; }
.card--digest   { grid-area: digest; }
.card--lessons  { grid-area: lessons; }
.card--cta      { grid-area: cta; }

/* ---------- kart temeli ---------- */

.card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 26px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
  opacity: 0;
  animation: card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* fare ışığı — js --mx/--my günceller */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
              rgba(150, 130, 255, 0.1), transparent 70%);
}

.card:hover { transform: translateY(-4px); border-color: var(--border-bright); }
.card:hover::after { opacity: 1; }

/* üst kenar ışık çizgisi */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 175, 255, 0.35), transparent);
  pointer-events: none;
}

/* ---------- kart başlıkları ---------- */

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.card-head h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.head-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  box-shadow: 0 4px 18px var(--violet-glow);
  flex-shrink: 0;
}

.head-icon--warm {
  background: linear-gradient(135deg, #f2a36e, #e2703a);
  box-shadow: 0 4px 18px rgba(226, 112, 58, 0.35);
}

.head-icon svg { width: 19px; height: 19px; color: #fff; }

/* ---------- intro ---------- */

.card--intro {
  display: flex;
  flex-direction: column;
}

.intro-mark { margin-bottom: 18px; }

.mark-glyph {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, #c9beff, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mark-dot { color: var(--amber); -webkit-text-fill-color: var(--amber); }

.intro-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.intro-bio {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.intro-foot { margin-top: auto; padding-top: 18px; }

.intro-role { color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; }

.intro-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6ee7a0;
  box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.55);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(110, 231, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); }
}

/* ---------- hero ---------- */

.card--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 34px 0;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(150, 125, 255, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(112, 90, 240, 0.92) 0%, rgba(78, 58, 200, 0.55) 46%, rgba(20, 16, 44, 0.4) 100%);
  border-color: rgba(190, 175, 255, 0.35);
}

.card--hero::before { left: 6%; right: 6%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); }

.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-brand svg { width: 14px; height: 14px; color: #ffd9a8; }

.hero-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(40, 20, 120, 0.5);
}

.hero-sub {
  margin-top: 12px;
  font-size: 0.98rem;
  color: rgba(235, 230, 255, 0.78);
  letter-spacing: 0.04em;
}

/* --- orb --- */

.orb-wrap {
  position: relative;
  margin-top: auto;
  width: 320px;
  height: 200px; /* kürenin ~2/3'ü kartın içinde, kalanı alttan taşar */
  flex-shrink: 0;
}

.orb {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 290px; height: 290px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #241a44 0%, #0d0a1c 65%);
  box-shadow:
    0 0 50px rgba(140, 115, 255, 0.65),
    0 0 130px rgba(124, 104, 245, 0.4),
    0 0 240px rgba(240, 145, 90, 0.18),
    inset 0 0 50px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/* parlak kenar ışığı */
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 18px rgba(200, 185, 255, 0.55),
    inset 0 -8px 30px rgba(240, 145, 90, 0.3);
  pointer-events: none;
}

.orb-swirl {
  position: absolute;
  inset: -18%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(140, 115, 255, 1) 60deg,
    rgba(120, 180, 255, 0.9) 120deg, rgba(255, 255, 255, 0.5) 145deg,
    transparent 210deg, rgba(255, 150, 80, 0.95) 280deg,
    rgba(255, 200, 140, 0.6) 320deg, transparent 350deg);
  filter: blur(12px);
  animation: swirl 9s linear infinite;
}

.orb-swirl--2 {
  background: conic-gradient(from 180deg,
    transparent 0deg, rgba(255, 150, 80, 0.8) 70deg,
    rgba(255, 220, 170, 0.45) 110deg, transparent 170deg,
    rgba(160, 140, 255, 0.95) 250deg, rgba(110, 170, 255, 0.5) 300deg,
    transparent 340deg);
  filter: blur(18px);
  animation-duration: 14s;
  animation-direction: reverse;
}

@keyframes swirl { to { transform: rotate(360deg); } }

.orb-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.75), rgba(170, 150, 255, 0.3) 45%, transparent 70%);
  filter: blur(6px);
  animation: core-breathe 5s ease-in-out infinite;
}

@keyframes core-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* hover'da kürenin içinde beliren fotoğraf */
.orb-photo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("../img/ruhat.jpg") center 18% / cover no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* mor ambiyansla kaynaşması için hafif renk örtüsü */
.orb-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, transparent 45%, rgba(20, 14, 50, 0.55) 100%),
              linear-gradient(160deg, rgba(124, 104, 245, 0.22), rgba(240, 145, 90, 0.12));
}

.orb:hover .orb-photo { opacity: 0.85; transform: scale(1); }
.orb:hover .orb-core { animation: none; opacity: 0; transition: opacity 0.4s ease; }

.orb-ring {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 318px; height: 318px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 185, 255, 0.45);
  animation: ring-spin 40s linear infinite;
}

@keyframes ring-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* ---------- sosyal ---------- */

.card--social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}

.social-link {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  transition: all 0.25s ease;
}

.social-link svg { width: 20px; height: 20px; }

.social-link:hover {
  color: #fff;
  border-color: var(--border-bright);
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  box-shadow: 0 6px 20px var(--violet-glow);
  transform: translateY(-3px);
}

/* ---------- istatistikler ---------- */

.card--stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, #cfc5ff, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-num--warm { background: linear-gradient(120deg, #ffd1ad, var(--amber)); -webkit-background-clip: text; background-clip: text; }

.stat-plus { -webkit-text-fill-color: var(--amber); color: var(--amber); }

.stat-label {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.stat-avatars { display: flex; margin-top: 8px; }

.avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--bg);
  margin-left: -8px;
}

.avatar:first-child { margin-left: 0; }
.a1 { background: linear-gradient(135deg, #8b7cf7, #5a44d8); }
.a2 { background: linear-gradient(135deg, #f2a36e, #d95f2b); }
.a3 { background: linear-gradient(135deg, #60a5fa, #3b6fd8); }

/* ---------- projeler ---------- */

.card--projects { display: flex; flex-direction: column; }

.project-list { list-style: none; display: flex; flex-direction: column; }

.project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 4px;
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 150, 255, 0.08);
  transition: padding-left 0.25s ease, background 0.25s ease;
  border-radius: 8px;
}

.project-row:hover { padding-left: 10px; background: rgba(150, 130, 255, 0.06); }

.project-row strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.project-row span {
  display: block;
  color: var(--ink-faint);
  font-size: 0.8rem;
  margin-top: 2px;
}

.project-row svg {
  width: 16px; height: 16px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.project-row:hover svg { color: var(--violet); transform: translate(2px, -2px); }

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--violet);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.card-more svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.card-more:hover svg { transform: translateX(4px); }

/* ---------- AI notları ---------- */

.card--digest { display: flex; flex-direction: column; }

.digest-list { list-style: none; display: flex; flex-direction: column; }

.digest-row {
  display: flex;
  gap: 12px;
  padding: 10px 4px;
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 150, 255, 0.08);
  border-radius: 8px;
  transition: background 0.25s ease;
}

.digest-row:hover { background: rgba(240, 145, 90, 0.06); }

.digest-row time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
  padding-top: 3px;
  text-transform: uppercase;
}

.digest-row p {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.4;
}

.digest-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--amber-soft);
  border: 1px dashed rgba(240, 145, 90, 0.4);
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 600;
}

.digest-soon svg { width: 15px; height: 15px; }

/* ---------- dersler ---------- */

.card--lessons { display: flex; flex-direction: column; }

.lessons-sub { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }

.pill-field { position: relative; flex: 1; min-height: 130px; }

.pill {
  position: absolute;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border-bright);
  background: var(--surface-strong);
  color: var(--ink-soft);
  animation: float 5s ease-in-out infinite;
}

.p1 { top: 8%;  left: 2%;  transform: rotate(-7deg); color: #cfc5ff; border-color: rgba(150,130,255,0.5); animation-delay: 0s; }
.p2 { top: 30%; right: 4%; transform: rotate(5deg);  animation-delay: 0.7s; }
.p3 { top: 52%; left: 8%;  transform: rotate(3deg);  color: var(--amber); border-color: rgba(240,145,90,0.5); animation-delay: 1.4s; }
.p4 { top: 74%; right: 8%; transform: rotate(-5deg); color: #cfc5ff; border-color: rgba(150,130,255,0.5); animation-delay: 2.1s; }
.p5 { top: 84%; left: 0%;  transform: rotate(6deg);  animation-delay: 2.8s; }
.p6 { top: 6%;  right: 16%; transform: rotate(12deg); animation-delay: 3.5s; }

.pill--dot {
  padding: 8px 11px;
  background: linear-gradient(135deg, #f2a36e, #e2703a);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(226, 112, 58, 0.4);
}

@keyframes float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -7px; }
}

/* ---------- iletişim ---------- */

.card--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 28px var(--violet-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-btn svg { width: 17px; height: 17px; }

.cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 36px rgba(124, 104, 245, 0.6);
}

.cta-note { color: var(--ink-faint); font-size: 0.8rem; }

/* ---------- footer ---------- */

.site-foot {
  text-align: center;
  padding: 10px 20px 36px;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

.foot-accent { color: var(--violet); font-weight: 600; }

/* ---------- masaüstü: küre hero'dan taşar, alt kartlar "oyulmuş" görünür ---------- */

@media (min-width: 1081px) {
  .card--hero {
    overflow: visible;
    z-index: 2; /* küre alttaki kartların üzerine taşar */
  }

  .orb-wrap { height: 170px; } /* kürenin 120px'i kartın altına taşar */

  .orb {
    top: 0;
    /* en dıştaki halka: zemin renginde "kesik" boşluğu */
    box-shadow:
      0 0 0 16px var(--bg),
      0 0 50px 16px rgba(140, 115, 255, 0.55),
      0 0 130px 20px rgba(124, 104, 245, 0.35),
      0 0 240px 30px rgba(240, 145, 90, 0.15),
      inset 0 0 50px rgba(0, 0, 0, 0.7);
  }

  .orb-ring { width: 334px; height: 334px; top: -22px; }

  /* kürenin altına denk gelen kartlar: içerik alta yaslanır, üst köşe küreye kalır */
  .card--stat-alt, .card--cta { justify-content: flex-end; padding-bottom: 28px; }

  /* dersler kartı geniş şerit: bilgi solda, pill'ler sağda */
  .card--lessons { flex-direction: row; align-items: center; gap: 24px; }
  .lessons-info { width: 40%; flex-shrink: 0; }
  .lessons-info .card-head { margin-bottom: 10px; }
  .pill-field { flex: 1; min-height: 100%; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "hero   hero"
      "intro  social"
      "stat1  stat2"
      "proj   digest"
      "lessons cta";
  }

  /* dar ekranda taşma yok: küre tam yuvarlak, kartın içinde */
  .card--hero { min-height: 580px; }
  .orb-wrap { height: 314px; }
  .orb { top: 10px; }
  .card--intro { min-height: 230px; }
  .card--social { min-height: 90px; }
  .card--projects, .card--digest { min-height: 320px; }
  .card--lessons { min-height: 300px; }
  .card--cta { min-height: 160px; }
}

@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero" "intro" "stat1" "stat2" "proj" "digest" "lessons" "social" "cta";
    gap: 14px;
  }

  .card { padding: 22px; border-radius: var(--r-md); }
  .card--hero { min-height: 480px; padding: 26px 22px 0; }
  .orb-wrap { width: 240px; height: 244px; }
  .orb { width: 220px; height: 220px; top: 12px; }
  .orb-ring { width: 240px; height: 240px; top: 2px; }
}

/* hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .card { opacity: 1; }
}