<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-6025701132399112855</id><updated>2025-12-21T05:44:42.598-08:00</updated><category term="almanca"/><category term="temel almanca"/><title type='text'>Temel Almanca Eğitimi</title><subtitle type='html'>Temel Almanca&#39;ya dair her şey...</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://www.almancatemel.com.tr/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6025701132399112855/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://www.almancatemel.com.tr/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>Unknown</name><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>1</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-6025701132399112855.post-8597904244399586698</id><published>2012-04-08T01:20:00.028-07:00</published><updated>2025-12-21T01:55:40.867-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="almanca"/><category scheme="http://www.blogger.com/atom/ns#" term="temel almanca"/><title type='text'>Almanca&#39;ya Giriş</title><content type='html'>&lt;!doctype html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
  &lt;title&gt;Almanca&#39;ya Giriş | AlmancaTemel.com.tr&lt;/title&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

  &lt;style&gt;
    :root{
      --bg1:#0b1020;
      --bg2:#121a34;
      --card: rgba(255,255,255,.08);
      --card2: rgba(255,255,255,.12);
      --stroke: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --accent:#a855f7; /* mor */
      --accent2:#22d3ee; /* cyan */
      --accent3:#fbbf24; /* amber */
      --ok:#34d399;
      --warn:#f59e0b;
      --bad:#fb7185;
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --r: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:&#39;Poppins&#39;, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(168,85,247,.25), transparent 60%),
        radial-gradient(900px 600px at 80% 20%, rgba(34,211,238,.20), transparent 60%),
        radial-gradient(900px 600px at 50% 90%, rgba(251,191,36,.18), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
      overflow-x:hidden;
    }

    /* top progress */
    .topbar{
      position:fixed; inset:0 0 auto 0;
      height:4px; background:rgba(255,255,255,.08);
      z-index:999;
    }
    .topbar &gt; div{
      height:100%;
      width:0%;
      background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
      border-radius:999px;
    }

    .wrap{max-width:1150px; margin:0 auto; padding:24px 18px 80px}

    /* header / hero */
    header{
      margin-top:18px;
      border:1px solid var(--stroke);
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border-radius: 28px;
      padding:28px 22px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    header:before{
      content:&quot;&quot;;
      position:absolute; inset:-2px;
      background: radial-gradient(600px 240px at 20% 10%, rgba(168,85,247,.28), transparent 60%),
                  radial-gradient(520px 240px at 80% 30%, rgba(34,211,238,.22), transparent 60%);
      filter: blur(16px);
      opacity:.9;
      pointer-events:none;
    }
    .hero{
      position:relative;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:center;
    }
    @media (max-width:900px){ .hero{grid-template-columns:1fr} }

    .brand{
      display:flex; align-items:center; gap:10px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.3px;
      margin-bottom:6px;
    }
    .pill{
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      padding:6px 10px;
      border-radius:999px;
      font-size:.85rem;
    }
    h1{
      margin:0 0 10px 0;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      line-height:1.1;
      letter-spacing:.2px;
    }
    .lead{
      margin:0 0 18px 0;
      color:var(--muted);
      font-size:1.05rem;
    }

    .ctaRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .btn{
      border:none;
      cursor:pointer;
      font-family:inherit;
      font-weight:700;
      border-radius:14px;
      padding:12px 14px;
      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
      display:inline-flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      user-select:none;
    }
    .btn-primary{
      color:#0b1020;
      background: linear-gradient(90deg, var(--accent3), var(--accent2));
      box-shadow: 0 14px 40px rgba(34,211,238,.18);
    }
    .btn-primary:hover{ transform: translateY(-1px); }
    .btn-ghost{
      color:var(--text);
      background: rgba(255,255,255,.08);
      border:1px solid var(--stroke);
    }
    .btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.11); }

    .searchBox{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      position:relative;
    }
    .search{
      width:100%;
      max-width:420px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      padding:12px 14px;
      color:var(--text);
      outline:none;
      font-size:1rem;
    }
    .search::placeholder{ color:rgba(255,255,255,.55) }
    .kpi{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:10px;
      margin-top:14px;
    }
    .kpi &gt; div{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      border-radius:16px;
      padding:10px 12px;
    }
    .kpi b{ display:block; font-size:1.05rem }
    .kpi span{ color:var(--muted); font-size:.9rem }
    @media (max-width:540px){ .kpi{grid-template-columns:1fr} }

    /* nav */
    nav{
      position:sticky;
      top:10px;
      z-index:50;
      margin:18px 0 0 0;
      border:1px solid var(--stroke);
      background: rgba(10,14,28,.55);
      backdrop-filter: blur(14px);
      border-radius: 18px;
      padding:10px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    nav a{
      color:var(--muted);
      text-decoration:none;
      font-weight:700;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid transparent;
      transition: background .2s ease, transform .15s ease, color .2s ease;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    nav a:hover{
      background: rgba(255,255,255,.08);
      color:var(--text);
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.10);
    }
    nav a.active{
      color:#0b1020;
      background: linear-gradient(90deg, rgba(251,191,36,.95), rgba(34,211,238,.9));
    }

    /* grid */
    main{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:14px;
    }
    .card{
      grid-column: span 6;
      border:1px solid var(--stroke);
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      border-radius: 22px;
      padding:18px;
      box-shadow: 0 10px 34px rgba(0,0,0,.25);
      position:relative;
      overflow:hidden;
      transform: translateY(10px);
      opacity:0;
      transition: transform .5s ease, opacity .5s ease;
    }
    .card.in{ transform: translateY(0); opacity:1; }
    .card.wide{ grid-column: span 12; }
    @media (max-width:900px){ .card{grid-column: span 12;} }

    .card h2{
      margin:0 0 10px 0;
      font-size:1.25rem;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .tagRow{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .tag{
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      color:var(--muted);
      padding:6px 10px;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
    }

    /* table modern */
    table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
    th{
      text-align:left;
      color:rgba(255,255,255,.78);
      font-size:.9rem;
      font-weight:700;
      padding:4px 10px;
    }
    td{
      padding:10px 10px;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.10);
    }
    tr td:first-child{ border-radius:12px 0 0 12px; }
    tr td:last-child{ border-radius:0 12px 12px 0; }

    /* interactive word */
    .word{
      cursor:pointer;
      color:rgba(255,255,255,.92);
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .word small{
      color:rgba(255,255,255,.55);
      font-weight:700;
      border:1px solid rgba(255,255,255,.12);
      padding:2px 8px;
      border-radius:999px;
      background: rgba(255,255,255,.06);
    }

    .muted{ color:var(--muted); }
    .example{
      margin-top:12px;
      padding:12px;
      border-radius:16px;
      border:1px dashed rgba(255,255,255,.18);
      background: rgba(0,0,0,.14);
      color:rgba(255,255,255,.78);
      line-height:1.6;
    }

    /* tabs */
    .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
    .tab{
      padding:9px 12px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      color:var(--muted);
      cursor:pointer;
      font-weight:800;
      transition: background .2s ease, transform .15s ease;
    }
    .tab:hover{ transform: translateY(-1px); }
    .tab.active{
      color:#0b1020;
      background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.9));
      border-color: transparent;
    }

    /* modal */
    .modalOverlay{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:2000;
      padding:18px;
    }
    .modal{
      width:min(560px, 100%);
      border-radius:22px;
      border:1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, rgba(15,19,40,.95), rgba(12,16,32,.92));
      box-shadow: var(--shadow);
      padding:16px;
    }
    .modalHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .modal h3{ margin:0; font-size:1.2rem; }
    .modal p{ margin:8px 0 0; color:var(--muted); line-height:1.5; }
    .iconBtn{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color:var(--text);
      border-radius:12px;
      cursor:pointer;
      padding:10px 12px;
      font-weight:800;
    }
    .modalActions{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:14px;
    }

    /* quiz bubble */
    .quiz{
      position:fixed;
      right:16px;
      bottom:16px;
      width:min(340px, calc(100vw - 32px));
      border:1px solid rgba(255,255,255,.16);
      background: rgba(10,14,28,.62);
      backdrop-filter: blur(14px);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow:hidden;
      z-index:1200;
    }
    .quizHeader{
      padding:10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .quizHeader b{ font-size:.95rem; }
    .quizBody{ padding:12px; }
    .q{
      margin:0 0 10px 0;
      color:rgba(255,255,255,.85);
      font-weight:700;
    }
    .opt{
      width:100%;
      text-align:left;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      cursor:pointer;
      margin-bottom:8px;
      font-weight:800;
      transition: transform .12s ease, background .2s ease;
    }
    .opt:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
    .scoreRow{
      display:flex; align-items:center; justify-content:space-between;
      color:var(--muted);
      font-size:.9rem;
      margin-top:8px;
    }
    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background: rgba(0,0,0,.6);
      border:1px solid rgba(255,255,255,.16);
      color:var(--text);
      padding:10px 12px;
      border-radius:999px;
      display:none;
      z-index:3000;
      backdrop-filter: blur(10px);
    }

    footer{
      margin-top:22px;
      text-align:center;
      color:rgba(255,255,255,.68);
      font-weight:700;
      font-size:.95rem;
      padding:20px 10px 40px;
    }

    /* reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;topbar&quot;&gt;&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;&lt;/div&gt;

&lt;div class=&quot;wrap&quot;&gt;

  &lt;header&gt;
    &lt;div class=&quot;hero&quot;&gt;
      &lt;div&gt;
        &lt;div class=&quot;brand&quot;&gt;
          &lt;span class=&quot;pill&quot;&gt;✨ 2025&lt;/span&gt;
          &lt;span class=&quot;pill&quot;&gt;A1 Başlangıç&lt;/span&gt;
          &lt;span class=&quot;pill&quot;&gt;Interaktif&lt;/span&gt;
        &lt;/div&gt;

        &lt;h1&gt;Almanca’ya giriş: &lt;span style=&quot;background:linear-gradient(90deg,var(--accent3),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;&quot;&gt;hızlı, modern, örnekli&lt;/span&gt;&lt;/h1&gt;
        &lt;p class=&quot;lead&quot;&gt;Konu konu ilerle, kelimelere tıkla, dinle, mini test çöz. Öğrenme ritmini kendin seç.&lt;/p&gt;

        &lt;div class=&quot;ctaRow&quot;&gt;
          &lt;a class=&quot;btn btn-primary&quot; href=&quot;#selam&quot;&gt;🚀 Bugün öğren&lt;/a&gt;
          &lt;a class=&quot;btn btn-ghost&quot; href=&quot;#diyalog&quot;&gt;💬 Güncel diyaloglar&lt;/a&gt;
          &lt;button class=&quot;btn btn-ghost&quot; id=&quot;randomWordBtn&quot;&gt;🎲 Rastgele kelime&lt;/button&gt;
        &lt;/div&gt;

        &lt;div class=&quot;kpi&quot; aria-label=&quot;site highlights&quot;&gt;
          &lt;div&gt;&lt;b&gt;5+ konu&lt;/b&gt;&lt;span&gt;Temel başlangıç&lt;/span&gt;&lt;/div&gt;
          &lt;div&gt;&lt;b&gt;Tıkla &amp; Öğren&lt;/b&gt;&lt;span&gt;Anlam + örnek&lt;/span&gt;&lt;/div&gt;
          &lt;div&gt;&lt;b&gt;Mini Quiz&lt;/b&gt;&lt;span&gt;Hızlı tekrar&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;searchBox&quot;&gt;
        &lt;input class=&quot;search&quot; id=&quot;search&quot; placeholder=&quot;Kelime ara (ör: Guten Morgen, Arzt, Tschüss)...&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;

  &lt;nav id=&quot;nav&quot;&gt;
    &lt;a href=&quot;#selam&quot; data-id=&quot;selam&quot;&gt;🗣️ Selam&lt;/a&gt;
    &lt;a href=&quot;#tani&quot; data-id=&quot;tani&quot;&gt;🤝 Tanışma&lt;/a&gt;
    &lt;a href=&quot;#meslek&quot; data-id=&quot;meslek&quot;&gt;🎓 Meslek&lt;/a&gt;
    &lt;a href=&quot;#dogum&quot; data-id=&quot;dogum&quot;&gt;📍 Doğum &amp; Yaşam&lt;/a&gt;
    &lt;a href=&quot;#diyalog&quot; data-id=&quot;diyalog&quot;&gt;💬 Diyalog&lt;/a&gt;
  &lt;/nav&gt;

  &lt;main&gt;

    &lt;!-- Selamlamalar --&gt;
    &lt;section class=&quot;card&quot; id=&quot;selam&quot; data-title=&quot;Selamlamalar&quot;&gt;
      &lt;h2&gt;🗣️ Almanca Selamlamalar&lt;/h2&gt;
      &lt;div class=&quot;tagRow&quot;&gt;
        &lt;span class=&quot;tag&quot;&gt;tıkla: anlam&lt;/span&gt;
        &lt;span class=&quot;tag&quot;&gt;kopyala&lt;/span&gt;
        &lt;span class=&quot;tag&quot;&gt;seslendir&lt;/span&gt;
      &lt;/div&gt;

      &lt;table&gt;
        &lt;tr&gt;&lt;th&gt;Almanca&lt;/th&gt;&lt;th&gt;Türkçesi&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Hi, Hallo&quot; data-meaning=&quot;Selam, samimi&quot;&gt;&lt;span&gt;Hi, Hallo&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Selam&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Guten Tag&quot; data-meaning=&quot;İyi günler / Merhaba&quot;&gt;&lt;span&gt;Guten Tag&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;İyi günler / Merhaba&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Guten Morgen&quot; data-meaning=&quot;Günaydın&quot;&gt;&lt;span&gt;Guten Morgen&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Günaydın&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Guten Abend&quot; data-meaning=&quot;İyi akşamlar&quot;&gt;&lt;span&gt;Guten Abend&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;İyi akşamlar&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Gute Nacht&quot; data-meaning=&quot;İyi geceler, uyumadan önce&quot;&gt;&lt;span&gt;Gute Nacht&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;İyi geceler&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Auf Wiedersehen&quot; data-meaning=&quot;Görüşmek üzere (yüz yüze)&quot;&gt;&lt;span&gt;Auf Wiedersehen&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Görüşmek üzere&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Auf Wiederhören&quot; data-meaning=&quot;Görüşmek üzere (telefonda)&quot;&gt;&lt;span&gt;Auf Wiederhören&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Görüşmek üzere (telefonda)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Tschüss&quot; data-meaning=&quot;Görüşürüz, samimi&quot;&gt;&lt;span&gt;Tschüss&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Görüşürüz&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Bis bald&quot; data-meaning=&quot;Yakında görüşürüz&quot;&gt;&lt;span&gt;Bis bald&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Yakında görüşürüz&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;

      &lt;div class=&quot;example&quot;&gt;
        Örnek: &lt;em&gt;- Guten Morgen! – Günaydın!&lt;br&gt;- Guten Abend! – İyi akşamlar!&lt;/em&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- Tanışma --&gt;
    &lt;section class=&quot;card&quot; id=&quot;tani&quot; data-title=&quot;Tanışma&quot;&gt;
      &lt;h2&gt;🤝 Tanışma&lt;/h2&gt;

      &lt;div class=&quot;tabs&quot; role=&quot;tablist&quot;&gt;
        &lt;button class=&quot;tab active&quot; data-tab=&quot;tani1&quot;&gt;Soru-Cevap&lt;/button&gt;
        &lt;button class=&quot;tab&quot; data-tab=&quot;tani2&quot;&gt;Mini Şablon&lt;/button&gt;
      &lt;/div&gt;

      &lt;div class=&quot;tabPanel&quot; id=&quot;tani1&quot;&gt;
        &lt;p class=&quot;muted&quot; style=&quot;line-height:1.7; margin:0;&quot;&gt;
          &lt;b&gt;Wie heißt du?&lt;/b&gt; – Adın ne?&lt;br&gt;
          &lt;i&gt;Ich heiße Ayşe. Und du?&lt;/i&gt; – Benim adım Ayşe. Ya sen?&lt;br&gt;&lt;br&gt;

          &lt;b&gt;Mein Name ist Zeynep.&lt;/b&gt; – Benim adım Zeynep.&lt;br&gt;
          &lt;b&gt;Wie alt bist du?&lt;/b&gt; – Kaç yaşındasın?&lt;br&gt;
          &lt;i&gt;Ich bin 23 Jahre alt.&lt;/i&gt; – 23 yaşındayım.&lt;br&gt;&lt;br&gt;

          &lt;b&gt;Woher kommst du?&lt;/b&gt; – Nerelisin?&lt;br&gt;
          &lt;i&gt;Ich komme aus İstanbul.&lt;/i&gt; – İstanbul’luyum.&lt;br&gt;&lt;br&gt;

          &lt;b&gt;Wie geht es dir?&lt;/b&gt; – Nasılsın?&lt;br&gt;
          &lt;i&gt;Danke, gut! Und dir?&lt;/i&gt; – Teşekkürler, iyiyim! Ya sen?
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;div class=&quot;tabPanel&quot; id=&quot;tani2&quot; style=&quot;display:none;&quot;&gt;
        &lt;div class=&quot;example&quot;&gt;
          Kopyala &amp; doldur:&lt;br&gt;&lt;br&gt;
          &lt;b&gt;Hallo! Ich heiße ____.&lt;/b&gt;&lt;br&gt;
          &lt;b&gt;Ich bin ____ Jahre alt.&lt;/b&gt;&lt;br&gt;
          &lt;b&gt;Ich komme aus ____.&lt;/b&gt;&lt;br&gt;
          &lt;b&gt;Meine Hobbys sind ____.&lt;/b&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ctaRow&quot; style=&quot;margin-top:12px;&quot;&gt;
          &lt;button class=&quot;btn btn-ghost&quot; data-copy=&quot;Hallo! Ich heiße ____. Ich bin ____ Jahre alt. Ich komme aus ____. Meine Hobbys sind ____.&quot;&gt;📋 Şablonu kopyala&lt;/button&gt;
          &lt;button class=&quot;btn btn-ghost&quot; data-speak=&quot;Hallo! Ich heiße ____. Ich bin ____ Jahre alt. Ich komme aus ____. Meine Hobbys sind ____.&quot;&gt;🔊 Seslendir&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;example&quot;&gt;
        Örnek: &lt;em&gt;- Hallo! Wie heißt du? – Merhaba! Adın ne?&lt;br&gt;- Ich heiße Mehmet. – Benim adım Mehmet.&lt;/em&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- Meslekler --&gt;
    &lt;section class=&quot;card&quot; id=&quot;meslek&quot; data-title=&quot;Meslekler&quot;&gt;
      &lt;h2&gt;🎓 Meslekler&lt;/h2&gt;
      &lt;table&gt;
        &lt;tr&gt;&lt;th&gt;Erkek&lt;/th&gt;&lt;th&gt;Kadın&lt;/th&gt;&lt;th&gt;Türkçesi&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Arzt&quot; data-meaning=&quot;Doktor (erkek)&quot;&gt;&lt;span&gt;Der Arzt&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Ärztin&quot; data-meaning=&quot;Doktor (kadın)&quot;&gt;&lt;span&gt;Die Ärztin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Doktor&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Anwalt&quot; data-meaning=&quot;Avukat (erkek)&quot;&gt;&lt;span&gt;Der Anwalt&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Anwältin&quot; data-meaning=&quot;Avukat (kadın)&quot;&gt;&lt;span&gt;Die Anwältin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Avukat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Lehrer&quot; data-meaning=&quot;Öğretmen (erkek)&quot;&gt;&lt;span&gt;Der Lehrer&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Lehrerin&quot; data-meaning=&quot;Öğretmen (kadın)&quot;&gt;&lt;span&gt;Die Lehrerin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Öğretmen&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Journalist&quot; data-meaning=&quot;Gazeteci (erkek)&quot;&gt;&lt;span&gt;Der Journalist&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Journalistin&quot; data-meaning=&quot;Gazeteci (kadın)&quot;&gt;&lt;span&gt;Die Journalistin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Gazeteci&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Pilot&quot; data-meaning=&quot;Pilot (erkek)&quot;&gt;&lt;span&gt;Der Pilot&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Pilotin&quot; data-meaning=&quot;Pilot (kadın)&quot;&gt;&lt;span&gt;Die Pilotin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Pilot&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Ingenieur&quot; data-meaning=&quot;Mühendis (erkek)&quot;&gt;&lt;span&gt;Der Ingenieur&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Ingenieurin&quot; data-meaning=&quot;Mühendis (kadın)&quot;&gt;&lt;span&gt;Die Ingenieurin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Mühendis&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Kellner&quot; data-meaning=&quot;Garson (erkek)&quot;&gt;&lt;span&gt;Der Kellner&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Kellnerin&quot; data-meaning=&quot;Garson (kadın)&quot;&gt;&lt;span&gt;Die Kellnerin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Garson&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Polizist&quot; data-meaning=&quot;Polis (erkek)&quot;&gt;&lt;span&gt;Der Polizist&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Polizistin&quot; data-meaning=&quot;Polis (kadın)&quot;&gt;&lt;span&gt;Die Polizistin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Polis&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Der Taxifahrer&quot; data-meaning=&quot;Taksici (erkek)&quot;&gt;&lt;span&gt;Der Taxifahrer&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class=&quot;word&quot; data-word=&quot;Die Taxifahrerin&quot; data-meaning=&quot;Taksici (kadın)&quot;&gt;&lt;span&gt;Die Taxifahrerin&lt;/span&gt;&lt;small&gt;+&lt;/small&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;Taksici&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;

      &lt;div class=&quot;example&quot;&gt;
        Örnek: &lt;em&gt;- Was ist dein Beruf? – Mesleğin nedir?&lt;br&gt;
        - Ich bin Ingenieur. – Ben mühendislik yapıyorum.&lt;br&gt;
        - Ich arbeite als Lehrerin in Berlin. – Berlin’de öğretmen olarak çalışıyorum.&lt;/em&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- Doğum &amp; Yaşam --&gt;
    &lt;section class=&quot;card&quot; id=&quot;dogum&quot; data-title=&quot;Doğum &amp; Yaşam&quot;&gt;
      &lt;h2&gt;📍 Doğum &amp; Yaşam&lt;/h2&gt;
      &lt;p class=&quot;muted&quot; style=&quot;line-height:1.7; margin:0;&quot;&gt;
        &lt;b&gt;Wann und wo bist du geboren?&lt;/b&gt; – Nerede ve ne zaman doğdun?&lt;br&gt;
        &lt;i&gt;Ich bin 1992 in Antalya geboren.&lt;/i&gt;&lt;br&gt;&lt;br&gt;

        &lt;b&gt;Seit wann wohnst du in Antalya?&lt;/b&gt; – Ne zamandan beri Antalya’da yaşıyorsun?&lt;br&gt;
        &lt;i&gt;Ich wohne seit zwei Monaten in Antalya.&lt;/i&gt;&lt;br&gt;&lt;br&gt;

        &lt;b&gt;Wie lange wirst du noch hier bleiben?&lt;/b&gt; – Ne kadar süre daha burada kalacaksın?&lt;br&gt;
        &lt;i&gt;Ich werde noch drei Jahre hier bleiben.&lt;/i&gt;&lt;br&gt;&lt;br&gt;

        &lt;b&gt;Hast du Geschwister?&lt;/b&gt; – Kardeşlerin var mı?&lt;br&gt;
        &lt;i&gt;Ja, ich habe einen Bruder und eine Schwester.&lt;/i&gt;&lt;br&gt;&lt;br&gt;

        &lt;b&gt;Was sind deine Hobbys?&lt;/b&gt; – Hobilerin neler?&lt;br&gt;
        &lt;i&gt;Ich spiele Fußball, lese Bücher und höre Musik.&lt;/i&gt;
      &lt;/p&gt;

      &lt;div class=&quot;ctaRow&quot; style=&quot;margin-top:12px;&quot;&gt;
        &lt;button class=&quot;btn btn-ghost&quot; data-speak=&quot;Wann und wo bist du geboren? Seit wann wohnst du in Antalya?&quot;&gt;🔊 Soruları seslendir&lt;/button&gt;
        &lt;button class=&quot;btn btn-ghost&quot; data-copy=&quot;Wann und wo bist du geboren? Seit wann wohnst du hier? Wie lange bleibst du noch?&quot;&gt;📋 Soruları kopyala&lt;/button&gt;
      &lt;/div&gt;

      &lt;div class=&quot;example&quot;&gt;
        Örnek: &lt;em&gt;- Woher kommst du? – Nerelisin?&lt;br&gt;- Ich komme aus Izmir. – İzmirliyim.&lt;/em&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- Diyaloglar --&gt;
    &lt;section class=&quot;card wide&quot; id=&quot;diyalog&quot; data-title=&quot;Diyaloglar&quot;&gt;
      &lt;h2&gt;💬 Güncel Diyaloglar&lt;/h2&gt;
      &lt;p class=&quot;muted&quot; style=&quot;margin:0 0 12px 0; line-height:1.7;&quot;&gt;
        Temel Almanca seviyesinde hazırlanmış güncel diyaloglara ulaşmak için aşağıya tıklayın.
      &lt;/p&gt;
      &lt;div class=&quot;ctaRow&quot;&gt;
        &lt;a href=&quot;https://www.almancatemel.com.tr&quot; target=&quot;_blank&quot; class=&quot;btn btn-primary&quot;&gt;Diyaloglara Git →&lt;/a&gt;
        &lt;a href=&quot;#selam&quot; class=&quot;btn btn-ghost&quot;&gt;Geri dön&lt;/a&gt;
      &lt;/div&gt;

      &lt;!-- Adsense: mevcut kodun aynı kalabilir --&gt;
      &lt;div style=&quot;margin-top:14px; border:1px dashed rgba(255,255,255,.18); border-radius:18px; padding:12px; color:rgba(255,255,255,.65);&quot;&gt;
        Reklam alanı (Adsense) – mevcut scriptinizi buraya koyabilirsiniz.
      &lt;/div&gt;
    &lt;/section&gt;

  &lt;/main&gt;

  &lt;footer&gt;
    © 2025 AlmancaTemel.com.tr — Tüm hakları saklıdır.&lt;br&gt;
    &lt;em&gt;Almanca öğrenmek artık daha hızlı, daha temiz, daha interaktif. ✨&lt;/em&gt;
  &lt;/footer&gt;

&lt;/div&gt;

&lt;!-- Modal --&gt;
&lt;div class=&quot;modalOverlay&quot; id=&quot;overlay&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;Kelime detayları&quot;&gt;
    &lt;div class=&quot;modalHead&quot;&gt;
      &lt;div&gt;
        &lt;h3 id=&quot;mWord&quot;&gt;Kelime&lt;/h3&gt;
        &lt;p id=&quot;mMeaning&quot;&gt;Anlam&lt;/p&gt;
      &lt;/div&gt;
      &lt;button class=&quot;iconBtn&quot; id=&quot;closeModal&quot;&gt;✕&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modalActions&quot;&gt;
      &lt;button class=&quot;btn btn-ghost&quot; id=&quot;copyBtn&quot;&gt;📋 Kopyala&lt;/button&gt;
      &lt;button class=&quot;btn btn-ghost&quot; id=&quot;speakBtn&quot;&gt;🔊 Seslendir&lt;/button&gt;
      &lt;button class=&quot;btn btn-primary&quot; id=&quot;goSectionBtn&quot;&gt;📌 Bölüme git&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Quiz --&gt;
&lt;div class=&quot;quiz&quot; id=&quot;quiz&quot;&gt;
  &lt;div class=&quot;quizHeader&quot;&gt;
    &lt;b&gt;⚡ 30 sn Mini Quiz&lt;/b&gt;
    &lt;button class=&quot;iconBtn&quot; id=&quot;toggleQuiz&quot; title=&quot;Kapat/Aç&quot;&gt;—&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;quizBody&quot; id=&quot;quizBody&quot;&gt;
    &lt;p class=&quot;q&quot; id=&quot;qText&quot;&gt;Soru&lt;/p&gt;
    &lt;button class=&quot;opt&quot; data-i=&quot;0&quot;&gt;&lt;/button&gt;
    &lt;button class=&quot;opt&quot; data-i=&quot;1&quot;&gt;&lt;/button&gt;
    &lt;button class=&quot;opt&quot; data-i=&quot;2&quot;&gt;&lt;/button&gt;
    &lt;div class=&quot;scoreRow&quot;&gt;
      &lt;span id=&quot;qCount&quot;&gt;1/3&lt;/span&gt;
      &lt;span&gt;Puan: &lt;b id=&quot;score&quot;&gt;0&lt;/b&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;toast&quot; id=&quot;toast&quot;&gt;&lt;/div&gt;

&lt;script&gt;
  // ------------------ Utilities ------------------
  const $ = (s, p=document) =&gt; p.querySelector(s);
  const $$ = (s, p=document) =&gt; [...p.querySelectorAll(s)];
  const toast = (msg) =&gt; {
    const t = $(&quot;#toast&quot;);
    t.textContent = msg;
    t.style.display = &quot;block&quot;;
    clearTimeout(window.__toastTimer);
    window.__toastTimer = setTimeout(()=&gt; t.style.display=&quot;none&quot;, 1400);
  };

  // ------------------ Scroll progress ------------------
  const progress = $(&quot;#progress&quot;);
  const onScroll = () =&gt; {
    const h = document.documentElement;
    const scrolled = (h.scrollTop) / (h.scrollHeight - h.clientHeight);
    progress.style.width = Math.max(0, Math.min(1, scrolled)) * 100 + &quot;%&quot;;
  };
  document.addEventListener(&quot;scroll&quot;, onScroll, {passive:true});
  onScroll();

  // ------------------ Reveal cards ------------------
  const io = new IntersectionObserver((entries)=&gt;{
    for(const e of entries){
      if(e.isIntersecting) e.target.classList.add(&quot;in&quot;);
    }
  }, {threshold: .12});
  $$(&quot;.card&quot;).forEach(c=&gt;io.observe(c));

  // ------------------ Active nav on scroll ------------------
  const sections = $$(&quot;.card&quot;).map(s =&gt; ({ id:s.id, el:s }));
  const navLinks = $$(&quot;#nav a&quot;);
  const setActive = (id) =&gt; {
    navLinks.forEach(a =&gt; a.classList.toggle(&quot;active&quot;, a.dataset.id === id));
  };
  const secIO = new IntersectionObserver((entries)=&gt;{
    const vis = entries.filter(e=&gt;e.isIntersecting).sort((a,b)=&gt;b.intersectionRatio-a.intersectionRatio)[0];
    if(vis) setActive(vis.target.id);
  }, {threshold:[.2,.35,.5,.7]});
  sections.forEach(s=&gt;secIO.observe(s.el));

  // ------------------ Modal word interaction ------------------
  const overlay = $(&quot;#overlay&quot;);
  const mWord = $(&quot;#mWord&quot;);
  const mMeaning = $(&quot;#mMeaning&quot;);
  let currentWord = &quot;&quot;, currentMeaning = &quot;&quot;, currentSectionId = &quot;&quot;;

  const openModal = (word, meaning, sectionId) =&gt; {
    currentWord = word;
    currentMeaning = meaning;
    currentSectionId = sectionId;
    mWord.textContent = word;
    mMeaning.textContent = meaning;
    overlay.style.display = &quot;flex&quot;;
    overlay.setAttribute(&quot;aria-hidden&quot;,&quot;false&quot;);
  };
  const closeModal = () =&gt; {
    overlay.style.display = &quot;none&quot;;
    overlay.setAttribute(&quot;aria-hidden&quot;,&quot;true&quot;);
  };

  $$(&quot;.word&quot;).forEach(w =&gt; {
    w.addEventListener(&quot;click&quot;, () =&gt; {
      const section = w.closest(&quot;.card&quot;)?.id || &quot;&quot;;
      openModal(w.dataset.word, w.dataset.meaning, section);
    });
  });

  $(&quot;#closeModal&quot;).addEventListener(&quot;click&quot;, closeModal);
  overlay.addEventListener(&quot;click&quot;, (e)=&gt;{ if(e.target === overlay) closeModal(); });
  document.addEventListener(&quot;keydown&quot;, (e)=&gt;{ if(e.key === &quot;Escape&quot;) closeModal(); });

  // Copy / Speak
  const speak = (text) =&gt; {
    try{
      if(!(&quot;speechSynthesis&quot; in window)) return toast(&quot;Tarayıcı seslendirmeyi desteklemiyor.&quot;);
      const u = new SpeechSynthesisUtterance(text);
      // çoğu tarayıcıda de-DE daha iyi
      u.lang = &quot;de-DE&quot;;
      window.speechSynthesis.cancel();
      window.speechSynthesis.speak(u);
      toast(&quot;Seslendiriliyor…&quot;);
    }catch{
      toast(&quot;Seslendirme çalışmadı.&quot;);
    }
  };

  const copy = async (text) =&gt; {
    try{
      await navigator.clipboard.writeText(text);
      toast(&quot;Kopyalandı ✅&quot;);
    }catch{
      toast(&quot;Kopyalama izni yok.&quot;);
    }
  };

  $(&quot;#copyBtn&quot;).addEventListener(&quot;click&quot;, ()=&gt; copy(currentWord));
  $(&quot;#speakBtn&quot;).addEventListener(&quot;click&quot;, ()=&gt; speak(currentWord));
  $(&quot;#goSectionBtn&quot;).addEventListener(&quot;click&quot;, ()=&gt;{
    closeModal();
    if(currentSectionId){
      document.getElementById(currentSectionId)?.scrollIntoView({behavior:&quot;smooth&quot;, block:&quot;start&quot;});
    }
  });

  $$(&quot;[data-copy]&quot;).forEach(btn =&gt; btn.addEventListener(&quot;click&quot;, ()=&gt; copy(btn.dataset.copy)));
  $$(&quot;[data-speak]&quot;).forEach(btn =&gt; btn.addEventListener(&quot;click&quot;, ()=&gt; speak(btn.dataset.speak)));

  // ------------------ Tabs ------------------
  $$(&quot;.tabs&quot;).forEach(tabWrap=&gt;{
    const tabs = $$(&quot;.tab&quot;, tabWrap);
    tabs.forEach(t=&gt;{
      t.addEventListener(&quot;click&quot;, ()=&gt;{
        tabs.forEach(x=&gt;x.classList.remove(&quot;active&quot;));
        t.classList.add(&quot;active&quot;);
        const card = tabWrap.closest(&quot;.card&quot;);
        const panels = $$(&quot;.tabPanel&quot;, card);
        panels.forEach(p=&gt; p.style.display = (p.id === t.dataset.tab) ? &quot;block&quot; : &quot;none&quot;);
      });
    });
  });

  // ------------------ Search filter ------------------
  const search = $(&quot;#search&quot;);
  search.addEventListener(&quot;input&quot;, ()=&gt;{
    const q = search.value.trim().toLowerCase();
    // highlight &amp; hide rows that don&#39;t match
    $$(&quot;table&quot;).forEach(tb=&gt;{
      const rows = $$(&quot;tr&quot;, tb).slice(1);
      let any = false;
      rows.forEach(r=&gt;{
        const text = r.textContent.toLowerCase();
        const show = !q || text.includes(q);
        r.style.display = show ? &quot;&quot; : &quot;none&quot;;
        if(show) any = true;
      });
      // if a table has no matches, keep it (could be in a section with other content)
    });
  });

  // ------------------ Random word button ------------------
  const allWords = $$(&quot;.word&quot;).map(w =&gt; ({
    word:w.dataset.word, meaning:w.dataset.meaning, section:w.closest(&quot;.card&quot;)?.id || &quot;&quot;
  }));
  $(&quot;#randomWordBtn&quot;).addEventListener(&quot;click&quot;, ()=&gt;{
    const pick = allWords[Math.floor(Math.random()*allWords.length)];
    openModal(pick.word, pick.meaning, pick.section);
  });

  // ------------------ Mini quiz ------------------
  const quizData = [
    { q: &quot;“Guten Morgen” ne demek?&quot;, opts:[&quot;İyi akşamlar&quot;,&quot;Günaydın&quot;,&quot;Görüşürüz&quot;], a:1 },
    { q: &quot;“Der Arzt” hangi meslek?&quot;, opts:[&quot;Doktor&quot;,&quot;Pilot&quot;,&quot;Avukat&quot;], a:0 },
    { q: &quot;“Tschüss” ne zaman kullanılır?&quot;, opts:[&quot;Resmi konuşma&quot;,&quot;Samimi vedalaşma&quot;,&quot;Doğum yeri sorarken&quot;], a:1 },
  ];
  let qi = 0, score = 0;

  const qText = $(&quot;#qText&quot;);
  const optBtns = $$(&quot;.opt&quot;);
  const qCount = $(&quot;#qCount&quot;);
  const scoreEl = $(&quot;#score&quot;);

  const renderQ = () =&gt; {
    const item = quizData[qi];
    qText.textContent = item.q;
    optBtns.forEach((b, i)=&gt; b.textContent = item.opts[i]);
    qCount.textContent = (qi+1) + &quot;/&quot; + quizData.length;
    scoreEl.textContent = score;
  };

  optBtns.forEach(btn=&gt;{
    btn.addEventListener(&quot;click&quot;, ()=&gt;{
      const i = Number(btn.dataset.i);
      const item = quizData[qi];
      if(i === item.a){
        score += 10;
        toast(&quot;Doğru ✅ +10&quot;);
      }else{
        toast(&quot;Yanlış ❌&quot;);
      }
      qi++;
      if(qi &gt;= quizData.length){
        toast(&quot;Quiz bitti! Puan: &quot; + score);
        qi = 0; score = 0;
      }
      renderQ();
    });
  });
  renderQ();

  // collapse quiz
  let quizOpen = true;
  $(&quot;#toggleQuiz&quot;).addEventListener(&quot;click&quot;, ()=&gt;{
    quizOpen = !quizOpen;
    $(&quot;#quizBody&quot;).style.display = quizOpen ? &quot;block&quot; : &quot;none&quot;;
    $(&quot;#toggleQuiz&quot;).textContent = quizOpen ? &quot;—&quot; : &quot;+&quot;;
  });
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</content><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/6025701132399112855/posts/default/8597904244399586698'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/6025701132399112855/posts/default/8597904244399586698'/><link rel='alternate' type='text/html' href='http://www.almancatemel.com.tr/2012/04/almancaya-giris-temel-almanca.html' title='Almanca&#39;ya Giriş'/><author><name>Unknown</name><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author></entry></feed>