/* ============================================
   HYPIUM FRC TEAM — Blueprint / Schematic Theme
   ============================================ */

:root {
  --navy: #004870;
  --navy-deep: #00304d;
  --ink: #001a2b;
  --dragon: #6fa8ce;
  --dragon-light: #b8dcf2;
  --paper: #f3f8fb;
  --paper-dim: #e4edf3;
  --amber: #ffb300;
  --white: #ffffff;
  --line: rgba(0, 72, 112, 0.16);
  --line-light: rgba(255, 255, 255, 0.16);

  --font-display: 'Syne', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* subtle grain overlay for texture */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Blueprint grid background ============ */
.blueprint-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 90%);
}
.blueprint-grid.faint { opacity: 0.5; }

/* ============ Corner brackets (signature motif) ============ */
.corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--amber); opacity: 0.9; pointer-events: none; }
.corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Scroll reveal: visible by default; only hides if JS opts an element in,
   so the page never depends on JavaScript to show its content. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.reveal-in { opacity: 1; transform: translateY(0); }

/* ============================================
   NAV
   ============================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(0, 26, 43, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-light);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 28px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav-logo { width: 42px; height: 42px; border-radius: 8px; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.03em; color: var(--white); }
.nav-brand-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--dragon-light); }

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--paper);
  opacity: 0.85; transition: opacity 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; color: var(--amber); }
.nav-links .tag { font-family: var(--font-mono); font-size: 10px; color: var(--amber); opacity: 0.8; }

.nav-cta {
  border: 1.5px solid var(--amber); color: var(--amber);
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 3px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--amber); color: var(--ink); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, var(--navy) 0%, var(--navy-deep) 55%, var(--ink) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 140px 24px 0;
  overflow: hidden;
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 780px;
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.hero-eyebrow .mono { font-size: 11.5px; color: var(--dragon-light); letter-spacing: 0.22em; }

.hero-logo-wrap {
  position: relative; width: 190px; height: 190px; margin-bottom: 32px;
  animation: rise 1s ease both;
}
.hero-logo-wrap .corner { width: 26px; height: 26px; }
.hero-logo { width: 100%; height: 100%; border-radius: 16px; animation: float 6s ease-in-out infinite; }

.hero-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 11vw, 118px);
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 0.95;
  animation: rise 1s ease 0.1s both;
}

.hero-subtitle {
  margin-top: 22px; max-width: 560px;
  font-size: 17.5px; line-height: 1.65; color: var(--dragon-light);
  animation: rise 1s ease 0.2s both;
}
.hero-subtitle .hl { color: var(--amber); font-weight: 600; }

.hero-actions {
  display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; justify-content: center;
  animation: rise 1s ease 0.3s both;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; padding: 14px 30px;
  border-radius: 3px; transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { transform: translateY(-2px); background: #ffc233; }
.btn-ghost { border: 1.5px solid var(--line-light); color: var(--white); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.specs-strip {
  position: relative; z-index: 2; width: 100%; max-width: 1100px;
  margin-top: 76px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.spec-plate {
  padding: 22px 12px; text-align: center;
  border-right: 1px solid var(--line-light);
  display: flex; flex-direction: column; gap: 6px;
}
.spec-plate:last-child { border-right: none; }
.spec-value { font-size: 20px; font-weight: 600; color: var(--white); }
.spec-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--dragon-light); text-transform: uppercase; }

/* ============================================
   SECTIONS — shared
   ============================================ */
.section { position: relative; padding: 110px 24px; }
.section-dark { background: var(--ink); color: var(--paper); }
.section-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }

.section-head { margin-bottom: 56px; max-width: 640px; }
.section-tag { display: inline-block; font-size: 11px; letter-spacing: 0.16em; color: var(--navy); opacity: 0.7; margin-bottom: 14px; }
.section-head.light .section-tag { color: var(--dragon-light); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.01em;
}
.section-head.light h2 { color: var(--white); }

/* ============================================
   HAKKIMIZDA
   ============================================ */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }

.about-copy p { font-size: 16px; line-height: 1.75; color: #2b3f4c; margin-bottom: 18px; max-width: 52ch; }

.about-values { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; }
.value-row { display: flex; gap: 16px; align-items: baseline; }
.value-row .mono { font-size: 12px; color: var(--amber); flex-shrink: 0; padding-top: 2px; }
.value-row p { font-size: 14.5px; line-height: 1.6; color: #2b3f4c; }

.small-label { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--navy); opacity: 0.7; margin-bottom: 18px; }

.subteam-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.subteam-list li {
  position: relative; background: var(--paper); padding: 22px 18px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: background 0.2s;
}
.subteam-list li:hover { background: var(--white); }
.subteam-list li .corner { border-color: var(--navy); opacity: 0.35; width: 12px; height: 12px; }
.subteam-list li:hover .corner { border-color: var(--amber); opacity: 1; }
.sub-icon { font-family: var(--font-mono); font-size: 18px; color: var(--navy); flex-shrink: 0; width: 24px; }
.subteam-list li strong { font-size: 14.5px; display: block; margin-bottom: 3px; }
.subteam-list li p { font-size: 12.5px; color: #5a707c; line-height: 1.4; }

/* ============================================
   FRC NEDİR
   ============================================ */
.frc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.frc-lead p { font-size: 16.5px; line-height: 1.8; color: var(--paper-dim); margin-bottom: 20px; max-width: 50ch; }
.frc-lead strong, .frc-lead em { color: var(--amber); font-style: normal; }

.frc-steps { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-light); }
.frc-step {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--line-light);
}
.step-num { font-size: 13px; color: var(--amber); padding-top: 2px; flex-shrink: 0; }
.frc-step strong { font-size: 16px; color: var(--white); display: block; margin-bottom: 4px; }
.frc-step p { font-size: 13.5px; color: var(--dragon-light); line-height: 1.55; }

.frc-note {
  margin-top: 56px; padding: 28px 32px; border-left: 3px solid var(--amber);
  background: rgba(255, 255, 255, 0.03);
}
.frc-note p { font-size: 16px; line-height: 1.7; color: var(--paper-dim); max-width: 70ch; }
.frc-note strong { color: var(--white); }

/* ============================================
   GALERİ
   ============================================ */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 4px;
}
.gallery-tile {
  position: relative; overflow: hidden; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.gallery-tile svg { width: 34px; height: 34px; opacity: 0.55; }
.gallery-tile::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-light) 1px, transparent 1px), linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
  background-size: 16px 16px;
}
.gallery-tile.span2 { grid-column: span 2; grid-row: span 2; }
.gallery-tile.has-photo::after { display: none; }
.gallery-tile.has-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.gallery-tile.has-photo:hover img { transform: scale(1.05); }

.gallery-note { margin-top: 22px; font-size: 11.5px; color: #5a707c; letter-spacing: 0.06em; }

/* ============================================
   SPONSORLAR
   ============================================ */
.sponsor-intro { font-size: 16.5px; line-height: 1.75; color: var(--paper-dim); max-width: 62ch; margin-bottom: 52px; }

.sponsor-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line-light); border: 1px solid var(--line-light);
  margin-bottom: 56px;
}
.sponsor-slot {
  background: var(--ink); height: 110px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: #4a6070; letter-spacing: 0.08em;
  transition: color 0.2s, background 0.2s;
}
.sponsor-slot:hover { color: var(--amber); background: rgba(255,255,255,0.02); }
.sponsor-slot.has-logo { padding: 20px; }
.sponsor-slot.has-logo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(1.6); opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.sponsor-slot.has-logo:hover img { filter: none; opacity: 1; }

.sponsor-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 48px; }
.tier-card {
  padding: 30px 26px; background: rgba(255,255,255,0.02); border-top: 2px solid var(--line-light);
}
.tier-card.featured { border-top-color: var(--amber); background: rgba(255,179,0,0.05); }
.tier-name { font-size: 12px; color: var(--amber); display: block; margin-bottom: 10px; }
.tier-card p { font-size: 14px; color: var(--paper-dim); line-height: 1.55; }

.sponsor-cta { display: inline-flex; }

/* ============================================
   İLETİŞİM
   ============================================ */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; }

.contact-info { display: flex; flex-direction: column; gap: 24px; }
.info-row { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.info-row .mono { font-size: 10.5px; color: var(--navy); opacity: 0.65; letter-spacing: 0.14em; }
.info-row p { font-size: 17px; margin-top: 6px; }
.info-row a:hover { color: var(--navy); text-decoration: underline; }
.contact-footnote { font-size: 12px; color: #8199a5; line-height: 1.5; margin-top: 4px; }

.contact-form {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: 36px; background: var(--white); border: 1px solid var(--line);
}
.contact-form .corner { border-color: var(--navy); }
.contact-form label { display: flex; flex-direction: column; gap: 8px; }
.contact-form label .mono { font-size: 10.5px; color: var(--navy); letter-spacing: 0.14em; }
.contact-form input, .contact-form textarea {
  font-family: var(--font-body); font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
  color: var(--ink); resize: vertical; transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--navy); background: var(--white); outline: none; }
.contact-form .btn { align-self: flex-start; border: none; }
.form-status { min-height: 16px; font-size: 12px; color: var(--navy); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background: var(--ink); border-top: 1px solid var(--line-light); padding: 48px 24px; }
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-logo { width: 40px; height: 40px; border-radius: 8px; }
.footer-brand .nav-brand-name { display: block; color: var(--white); }
.footer-brand .nav-brand-sub { display: block; color: var(--dragon-light); margin-top: 2px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 13.5px; color: var(--paper-dim); opacity: 0.8; }
.footer-links a:hover { opacity: 1; color: var(--amber); }
.footer-copy { font-size: 10.5px; color: #4a6070; letter-spacing: 0.06em; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .about-grid, .frc-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-tiers { grid-template-columns: 1fr; }
  .specs-strip { grid-template-columns: repeat(2, 1fr); }
  .spec-plate:nth-child(2) { border-right: none; }
}

@media (max-width: 760px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.open .nav-inner { flex-wrap: wrap; }
  .site-nav.open .nav-links {
    display: flex; flex-direction: column; order: 3; width: 100%;
    background: var(--ink); padding: 22px 4px 6px; gap: 18px;
  }
  .site-nav.open .nav-cta {
    display: inline-flex; order: 4; width: 100%; justify-content: center;
    margin: 6px 0 22px; background: var(--ink);
  }
  .subteam-list { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .section { padding: 80px 20px; }
  .hero { padding-top: 120px; }
}


/* Footer social links */
.footer-socials { display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; margin:14px 0; }
.footer-socials a { font-family: "IBM Plex Mono", monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; }
.footer-socials a:hover { text-decoration:underline; }


/* Mobile image reliability */
.gallery-tile.has-photo img, .sponsor-slot.has-logo img {
  display:block;
}
@media (max-width: 760px) {
  .gallery-grid { grid-auto-rows: 150px; }
  .gallery-tile.span2 { grid-column: 1 / -1; grid-row: span 2; }
  .gallery-tile.has-photo img { width:100%; height:100%; object-fit:cover; }
  .sponsor-slot { min-height:120px; }
  .sponsor-slot.has-logo img { filter:none; opacity:1; max-width:90%; max-height:85px; }
}

/* ===== HYPIUM EXTENDED CONTENT v8 ===== */
.lang-switch{display:flex;align-items:center;gap:6px;margin-left:10px;font-family:var(--font-mono);font-size:11px;color:var(--paper-dim)}.lang-btn{border:0;background:transparent;color:inherit;cursor:pointer;padding:5px 4px;font:inherit}.lang-btn.active{color:var(--amber);font-weight:700}.story-grid,.school-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}.story-copy p{font-size:17px;line-height:1.85;color:var(--paper-dim);margin-bottom:20px}.story-copy blockquote{font-family:var(--font-display);font-size:28px;line-height:1.25;color:var(--amber);border-left:3px solid var(--amber);padding-left:22px;margin:34px 0}.timeline{border-left:1px solid rgba(255,255,255,.2);padding-left:28px}.timeline-item{position:relative;padding:0 0 34px 12px}.timeline-item:before{content:"";position:absolute;left:-34px;top:4px;width:10px;height:10px;background:var(--amber);border-radius:50%}.timeline-item .mono{color:var(--amber);font-size:11px}.timeline-item h3{color:var(--white);font-family:var(--font-display);font-size:22px;margin:7px 0}.timeline-item p{color:var(--paper-dim);line-height:1.65}.school-photo{border:1px solid var(--line);padding:10px;background:var(--white)}.school-photo img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}.about-copy h3{font-family:var(--font-display);font-size:32px;color:var(--navy);margin-bottom:18px}.dark-ghost{color:var(--navy);border-color:var(--navy);margin-top:12px}.dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 52px}.dept-grid div{border:1px solid rgba(255,255,255,.22);padding:20px 16px;color:var(--white);font-family:var(--font-display);font-size:18px;min-height:76px;display:flex;align-items:center}.subsection-title{font-family:var(--font-display);font-size:30px;color:var(--white);margin:10px 0 22px}.captain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.captain-card{border:1px solid rgba(255,255,255,.22);padding:30px;position:relative}.captain-card .mono{color:var(--amber);font-size:11px}.captain-card h3{font-family:var(--font-display);font-size:28px;color:var(--white);margin:8px 0 12px}.captain-card a{display:block;color:var(--paper-dim);margin-top:7px;overflow-wrap:anywhere}.captain-link{color:var(--amber)!important}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project-card{border:1px solid var(--line);padding:30px;background:var(--white)}.project-card .mono{font-size:10px;color:var(--navy);letter-spacing:.1em}.project-card h3{font-family:var(--font-display);font-size:24px;color:var(--navy);margin:10px 0 14px}.project-card p{line-height:1.75;color:var(--muted)}.goal-lead{max-width:900px;font-size:20px;line-height:1.75;color:var(--paper-dim);margin-bottom:38px}.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.goal-grid article{border:1px solid rgba(255,255,255,.22);padding:28px}.goal-grid article>span{font-family:var(--font-mono);color:var(--amber);font-size:12px}.goal-grid h3{font-family:var(--font-display);color:var(--white);font-size:22px;margin:9px 0 12px}.goal-grid p{color:var(--paper-dim);line-height:1.65}.sponsor-slot{position:relative;padding-bottom:42px}.sponsor-support{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:var(--amber);font-size:10px;letter-spacing:.08em}.sponsor-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}.section-dark .sponsor-actions .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.55)}
@media(max-width:900px){.story-grid,.school-grid{grid-template-columns:1fr;gap:38px}.dept-grid{grid-template-columns:repeat(2,1fr)}.goal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.lang-switch{margin-left:auto}.site-nav.open .lang-switch{order:2}.captain-grid,.project-grid,.goal-grid{grid-template-columns:1fr}.dept-grid{grid-template-columns:1fr 1fr}.story-copy blockquote{font-size:23px}.goal-lead{font-size:17px}.school-photo{padding:6px}}

/* v9 reliability additions */
.lang-btn{text-decoration:none;display:inline-block}
.school-photo{position:relative;overflow:hidden;min-height:280px}
.school-photo::after{content:"DÜZCE FEN LİSESİ";position:absolute;left:18px;bottom:18px;background:rgba(6,34,55,.88);color:#fff;padding:10px 14px;font-family:var(--font-display);font-size:18px;letter-spacing:.04em;border-left:3px solid var(--amber)}
.school-photo img{min-height:280px}
@media(max-width:760px){.school-photo{min-height:220px}.school-photo img{min-height:220px}.school-photo::after{left:12px;bottom:12px;font-size:15px}}

html[lang="en"] .school-photo::after{content:"DÜZCE SCIENCE HIGH SCHOOL"}